import React from 'react';
import { useForm } from 'react-hook-form';
import { __ } from '@wordpress/i18n';
import { AppInput, AppSelect } from '../../../../../shared/form';
import { UserType } from '../../../../../services/api.service.types';

export interface RegisterStep2FormData {
  businessName: string;
  ownerName: string;
  category: string;
}

export interface RegisterStep2Props {
  businessTypes: Record<string, string>;
  userType: UserType;
  formData?: Partial<RegisterStep2FormData>;
  onBack: () => void;
  onSubmit: (data: RegisterStep2FormData) => void;
}

export function RegisterStep2({
  businessTypes,
  userType,
  formData,
  onBack,
  onSubmit,
}: RegisterStep2Props): JSX.Element {
  const isPartner = userType === 'Partner';

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<RegisterStep2FormData>({
    defaultValues: {
      businessName: formData?.businessName || '',
      category: formData?.category || '',
      ownerName: formData?.ownerName || '',
    },
  });

  const onSubmitForm = (data: RegisterStep2FormData): void => {
    onSubmit(data);
  };

  return (
    <div className="ttsbs-step w-full flex flex-col gap-4 items-center">
      <div className="w-full max-w-md flex flex-col items-center gap-8 bg-white shadow rounded-lg px-6 py-8">
        <div className="flex flex-col items-center gap-2">
          <h2 className="text-xl font-medium">
            {isPartner ? __("Your client's details", 'timetailor-salon-booking') : __('Business details', 'timetailor-salon-booking')}
          </h2>
          <p className="text-center max-w-sm subtitle">
            {isPartner
              ? __("We'll use these details to set up your client's booking system.", 'timetailor-salon-booking')
              : __("We'll use these details to set up your booking system.", 'timetailor-salon-booking')}
          </p>
        </div>

        <form className="w-full flex flex-col gap-4" onSubmit={handleSubmit(onSubmitForm)}>
          <AppInput
            label={isPartner ? __("YOUR CLIENT'S BUSINESS NAME", 'timetailor-salon-booking') : __('BUSINESS NAME', 'timetailor-salon-booking')}
            register={register('businessName', { required: true, maxLength: 100 })}
            error={errors.businessName}
          />

          <AppSelect
            label={isPartner ? __('CATEGORY', 'timetailor-salon-booking') : __('BUSINESS TYPE', 'timetailor-salon-booking')}
            register={register('category', { required: true })}
            error={errors.category}
            options={Object.entries(businessTypes).map(([value, label]) => ({
              value,
              label,
            }))}
            placeholder=""
          />

          <AppInput
            label={isPartner ? __("OWNER'S NAME", 'timetailor-salon-booking') : __('YOUR FIRST NAME', 'timetailor-salon-booking')}
            register={register('ownerName', {
              required: true,
            })}
            error={errors.ownerName}
          />

          <div className="w-full flex items-center justify-between space-x-3">
            <button type="button" className="button" onClick={onBack}>
              {__('Back', 'timetailor-salon-booking')}
            </button>
            <button
              type="submit"
              className="flex-1 button button-primary button-large"
            >
              {__('Next', 'timetailor-salon-booking')}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}