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

'use client';

import { type ProfileProps } from '../types';
import { TextField } from '@/components/shared/data-fields';
import { CardSectionHeader } from '@/components/ui';
import { useCustomerMutation, useCustomerQuery } from '@/hooks/api/customers';
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 } = {} } = useCustomerQuery({ telegramId });

  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 } = {} } = useCustomerQuery();
  const { cancelChanges, hasChanges, isPending, resetTrigger, saveChanges, updateField } =
    useProfileEdit();

  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 ? Role.Master : 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,
  };
}