'use client';
import { CheckboxWithText, DataField, ProfileCardHeader } from './components';
import { type ProfileProps } from './types';
import { useProfileMutation, useProfileQuery } from '@/hooks/profile';
import { Enum_Customer_Role as 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';

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

  if (!customer) return null;

  return (
    <Card className="p-4">
      <div className="flex flex-col gap-4">
        <Link href={customer?.phone ? `tel:${customer?.phone}` : ''}>
          <DataField 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 } = useProfileQuery({});
  const { mutate: updateProfile } = useProfileMutation({});

  if (!customer) return null;

  return (
    <Card className="p-4">
      <div className="flex flex-col gap-4">
        <ProfileCardHeader title="Ваши данные" />
        <DataField
          fieldName="name"
          id="name"
          label="Имя"
          onChange={updateProfile}
          value={customer?.name ?? ''}
        />
        <DataField disabled id="phone" label="Телефон" readOnly value={customer?.phone ?? ''} />
        <CheckboxWithText
          checked={customer.role !== 'client'}
          description="Разрешить другим пользователям записываться к вам"
          onChange={(checked) => updateProfile({ role: checked ? Role.Master : Role.Client })}
          text="Быть мастером"
        />
      </div>
    </Card>
  );
}