import { type MeResponse, getFullName } from '@features/auth'
import { FormField, Notification } from '@shared/ui'
import { ProfileSection } from './ProfileSection'
import { usePhoneField } from '../model/usePhoneField'
import styles from './fieldsGrid.module.css'

interface Props {
  data: MeResponse
}

export function IndividualFields({ data }: Props) {
  const fullName = getFullName(data)
  const { phone, onPhoneChange, onPhoneBlur, notification, dismissNotification } = usePhoneField(data.phone)

  return (
    <>
      <ProfileSection title="Личные данные">
        <div className={styles.grid2}>
          <FormField label="Полное ФИО" value={fullName} placeholder="Например: Иванов Иван Иванович" readOnly />
          <FormField label="Адрес электронной почты" value={data.email ?? ''} type="email" icon="check" placeholder="example@mail.ru" readOnly />
          <FormField label="Серия и номер паспорта" value={data.passport_data ?? ''} placeholder="0000 000000" readOnly />
          <FormField label="Номер телефона" value={phone} onChange={onPhoneChange} onBlur={onPhoneBlur} type="tel" placeholder="+7 (999) 000-00-00" />
        </div>
      </ProfileSection>

      <ProfileSection title="Верификация">
        <div className={styles.grid2}>
          <FormField label="ИНН" value={data.inn ?? ''} readOnly icon="lock" placeholder="000000000000" />
          <FormField label="ID аккаунта" value={data.id ?? ''} readOnly icon="lock" placeholder="ECSA-00000000" />
        </div>
      </ProfileSection>

      {notification && (
        <Notification status={notification.status} message={notification.message} onClose={dismissNotification} />
      )}
    </>
  )
}
