import { useForm } from 'react-hook-form';

import { Button } from 'components/common';
import { Input } from 'components/inputs';
import { FormRow } from 'components/FormRow';

export type ProfileFormValues = {
  companyName: string | null;
  firstName: string | null;
  lastName: string | null;
};

interface ProfileDataFormProps {
  initialState?: ProfileFormValues;
  onSubmit: (data: ProfileFormValues) => void;
  loading: boolean;
}

export const ProfileDataForm = ({
  initialState,
  onSubmit,
  loading,
}: ProfileDataFormProps) => {
  const { register, handleSubmit } = useForm<ProfileFormValues>({
    defaultValues: initialState,
  });

  return (
    <div>
      <FormRow label="Company name">
        <Input
          placeholder="Company name"
          {...register('companyName', { required: true })}
        />
      </FormRow>

      <FormRow label="Full name">
        <div className="flex spacing2">
          <Input
            placeholder="First Name"
            {...register('firstName', { required: true })}
          />
          <Input
            placeholder="Last Name"
            {...register('lastName', { required: true })}
          />
        </div>
      </FormRow>

      <FormRow>
        <Button
          size="l"
          color="gray"
          onClick={handleSubmit(onSubmit)}
          disabled={loading}
          block
        >
          Update profile
        </Button>
      </FormRow>
    </div>
  );
};