zapishis-client/apps/web/components/profile/data-card/index.tsx

/* eslint-disable canonical/id-match */
'use client';

import { type ProfileProps } from '../types';
import { CheckboxWithText, TextField } from '@/components/shared/data-fields';
import { CardSectionHeader } from '@/components/ui';
import { useCustomerMutation, useCustomerQuery } from '@/hooks/api/customers';
import { Enum_Customer_Role } from '@repo/graphql/types';
import { Button } from '@repo/ui/components/ui/button';
import { Card } from '@repo/ui/components/ui/card';
import Link from 'next/link';
import { useState } from 'react';

export function ContactDataCard({ telegramId }: Readonly<ProfileProps>) {
  const { data: { customer } = {}, isLoading } = useCustomerQuery({ telegramId });

  if (isLoading)
    return (
      <Card className="p-4">
        <div className="flex animate-pulse flex-col gap-4">
          <div className="h-4 w-16 rounded bg-muted" />
          <div className="h-6 w-32 rounded bg-muted" />
          <div className="h-10 w-full rounded bg-muted" />
        </div>
      </Card>
    );

  if (!customer) return null;

  return (
    <Card className="p-4">
      <div className="flex flex-col gap-4">
        <Link href={customer?.phone ? `tel:${customer?.phone}` : ''}>
          <TextField id="phone" label="Телефон" readOnly value={customer?.phone ?? ''} />
        </Link>
        <Button asChild className="w-full bg-foreground">
          <Link href={`https://t.me/${customer?.phone}`} rel="noopener noreferrer" target="_blank">
            Написать в Telegram
          </Link>
        </Button>
      </div>
    </Card>
  );
}

export function ProfileDataCard() {
  const { data: { customer } = {}, isLoading } = useCustomerQuery();
  const { cancelChanges, hasChanges, isPending, resetTrigger, saveChanges, updateField } =
    useProfileEdit();

  if (isLoading)
    return (
      <Card className="p-4">
        <div className="flex animate-pulse flex-col gap-4">
          <div className="h-6 w-32 rounded bg-muted" />
          <div className="h-4 w-16 rounded bg-muted" />
          <div className="h-10 w-full rounded bg-muted" />
          <div className="h-4 w-16 rounded bg-muted" />
          <div className="h-10 w-full rounded bg-muted" />
          <div className="h-5 w-60 rounded bg-muted" />
        </div>
      </Card>
    );

  if (!customer) return null;

  return (
    <Card className="p-4">
      <div className="flex flex-col gap-4">
        <CardSectionHeader title="Ваши данные" />
        <TextField
          id="name"
          key={`name-${resetTrigger}`}
          label="Имя"
          onChange={(value) => updateField('name', value)}
          value={customer?.name ?? ''}
        />
        <TextField disabled id="phone" label="Телефон" readOnly value={customer?.phone ?? ''} />
        <CheckboxWithText
          checked={customer.role !== 'client'}
          description="Разрешить другим пользователям записываться к вам"
          onChange={(checked) =>
            updateField('role', checked ? Enum_Customer_Role.Master : Enum_Customer_Role.Client)
          }
          text="Быть мастером"
        />
        {hasChanges && (
          <div className="flex justify-end gap-2">
            <Button disabled={isPending} onClick={cancelChanges} variant="outline">
              Отмена
            </Button>
            <Button disabled={isPending} onClick={saveChanges}>
              {isPending ? 'Сохранение...' : 'Сохранить'}
            </Button>
          </div>
        )}
      </div>
    </Card>
  );
}

function useProfileEdit() {
  const { isPending, mutate } = useCustomerMutation();
  const [pendingChanges, setPendingChanges] = useState<Record<string, unknown>>({});
  const [resetTrigger, setResetTrigger] = useState(0);

  const updateField = (field: string, value: unknown) => {
    setPendingChanges((previous) => ({ ...previous, [field]: value }));
  };

  const saveChanges = () => {
    if (Object.keys(pendingChanges).length === 0) return;

    mutate({ data: pendingChanges });
    setPendingChanges({});
  };

  const cancelChanges = () => {
    setPendingChanges({});
    setResetTrigger((previous) => previous + 1);
  };

  const hasChanges = Object.keys(pendingChanges).length > 0;

  return {
    cancelChanges,
    hasChanges,
    isPending,
    resetTrigger,
    saveChanges,
    updateField,
  };
}