import Input from '@/components/ui/input';
import Description from '@/components/ui/description';
import Card from '@/components/common/card';
import { useFormContext } from 'react-hook-form';
import { useTranslation } from 'next-i18next';
import Checkbox from '@/components/ui/checkbox/checkbox';
import FileInput from '@/components/ui/file-input';
import Label from '@/components/ui/label';
import { Config } from '@/config';
import Alert from '@/components/ui/alert';
import TextArea from '@/components/ui/text-area';

type IProps = {
  initialValues: any;
  settings: any | null;
};

export default function SimpleProductForm({ initialValues, settings }: IProps) {
  const { t } = useTranslation();
  const {
    register,
    formState: { errors },
    control,
    watch,
  } = useFormContext();

  const is_digital = watch('is_digital');
  const is_external = watch('is_external');
  const is_update_message = watch('inform_purchased_customer');

  return (
    <div className="my-5 flex flex-wrap sm:my-8">
      <Description
        title={t('form:form-title-simple-product-info')}
        details={`${
          initialValues
            ? t('form:item-description-edit')
            : t('form:item-description-add')
        } ${t('form:form-description-simple-product-info')}`}
        className="w-full px-0 pb-5 sm:w-4/12 sm:py-8 sm:pe-4 md:w-1/3 md:pe-5"
      />

      <Card className="w-full sm:w-8/12 md:w-2/3">
        <Input
          label={`${t('form:input-label-price')}*`}
          {...register('price')}
          type="number"
          error={t(errors.price?.message!)}
          variant="outline"
          className="mb-5"
        />
        <Input
          label={t('form:input-label-sale-price')}
          type="number"
          {...register('sale_price')}
          error={t(errors.sale_price?.message!)}
          variant="outline"
          className="mb-5"
        />

        <Input
          label={`${t('form:input-label-quantity')}*`}
          type="number"
          {...register('quantity')}
          error={t(errors.quantity?.message!)}
          variant="outline"
          className="mb-5"
        />

        <Input
          label={`${t('form:input-label-sku')}*`}
          {...register('sku')}
          error={t(errors.sku?.message!)}
          variant="outline"
          className="mb-5"
          note={
            Config.enableMultiLang
              ? `${t('form:input-note-multilang-sku')}`
              : ''
          }
        />

        <Input
          label={t('form:input-label-width')}
          {...register('width')}
          error={t(errors.width?.message!)}
          variant="outline"
          className="mb-5"
        />
        <Input
          label={t('form:input-label-height')}
          {...register('height')}
          error={t(errors.height?.message!)}
          variant="outline"
          className="mb-5"
        />
        <Input
          label={t('form:input-label-length')}
          {...register('length')}
          error={t(errors.length?.message!)}
          variant="outline"
          className="mb-5"
        />
        <Checkbox
          {...register('is_digital')}
          id="is_digital"
          label={t('form:input-label-is-digital')}
          disabled={Boolean(is_external)}
          className="mb-5"
        />

        <Checkbox
          {...register('is_external')}
          id="is_external"
          label={t('form:input-label-is-external')}
          disabled={Boolean(is_digital)}
          className="mb-5"
        />

        {is_digital && (
          <>
            <Label>{t('form:input-label-digital-file')}</Label>
            <FileInput
              name="digital_file_input"
              control={control}
              multiple={false}
              acceptFile={true}
              helperText={t('form:text-upload-digital-file')}
            />
            <Alert
              message={t('form:info-about-digital-product')}
              variant="info"
              closeable={false}
              className="mt-5 mb-5"
            />
            <input type="hidden" {...register(`digital_file`)} />

            {settings?.settings?.options?.enableEmailForDigitalProduct ? (
              <div className="mt-5 mb-5">
                <Checkbox
                  {...register('inform_purchased_customer')}
                  id="inform_purchased_customer"
                  label="Send email to already purchased customer of this item about this update."
                  // disabled={Boolean(is_external)}
                  className="mb-5"
                />
                {is_update_message ? (
                  <TextArea
                    {...register('product_update_message')}
                    id="product_update_message"
                    label="You can send message towards customer about this update."
                    variant="outline"
                    className="col-span-2"
                    placeholder="(Optional)"
                  />
                ) : null}
              </div>
            ) : null}

            {
              // @ts-ignore
              errors.digital_file_input && (
                <p className="my-2 text-xs text-red-500 text-start">
                  {
                    // @ts-ignore
                    t('form:error-digital-file-is-required')
                  }
                </p>
              )
            }
          </>
        )}
        {is_external && (
          <div>
            <Input
              label={t('form:input-label-external-product-url')}
              {...register('external_product_url')}
              error={t(errors.external_product_url?.message!)}
              variant="outline"
              className="mb-5"
            />
            <Input
              label={t('form:input-label-external-product-button-text')}
              {...register('external_product_button_text')}
              error={t(errors.external_product_button_text?.message!)}
              variant="outline"
              className="mb-5"
            />
          </div>
        )}
      </Card>
    </div>
  );
}
