'use client';

import { type ProfileProps } from '../types';
import { DataField } from './text-field';
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';

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}` : ''}>
          <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 } = {} } = useCustomerQuery();
  const { mutate: updateCustomer } = useCustomerMutation();

  if (!customer) return null;

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