import EditTag from '@/components/edit-tag';
import { FileUploader } from '@/components/file-uploader';
import Image from '@/components/image';
import Divider from '@/components/ui/divider';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card';
import { Input } from '@/components/ui/input';
import { Modal } from '@/components/ui/modal/modal';
import Space from '@/components/ui/space';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { useFetchChunk } from '@/hooks/use-chunk-request';
import { IModalProps } from '@/interfaces/common';
import type { ChunkDocType } from '@/interfaces/database/dataset';
import React, { useCallback, useEffect, useState } from 'react';
import { FieldValues, FormProvider, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import {
  transformTagFeaturesArrayToObject,
  transformTagFeaturesObjectToArray,
} from '../../utils';
import { TagFeatureItem } from './tag-feature-item';

interface kFProps {
  doc_id: string;
  chunkId: string | undefined;
  parserId: string;
}

async function fileToBase64(file: File) {
  if (!file) {
    return;
  }

  return new Promise<string>((resolve, reject) => {
    const fr = new FileReader();
    fr.addEventListener('load', () => {
      resolve((fr.result?.toString() ?? '').replace(/^.*,/, ''));
    });
    fr.onerror = reject;
    fr.readAsDataURL(file);
  });
}

const ChunkCreatingModal: React.FC<IModalProps<any> & kFProps> = ({
  doc_id,
  chunkId,
  hideModal,
  onOk,
  loading,
  parserId,
}) => {
  // const [form] = Form.useForm();
  // const form = useFormContext();
  const form = useForm<FieldValues>({
    defaultValues: {
      content_with_weight: '',
      tag_kwd: [],
      question_kwd: [],
      important_kwd: [],
      tag_feas: [],
      image: [],
    },
  });
  const [checked, setChecked] = useState(false);
  const { data } = useFetchChunk(chunkId, doc_id);
  const { t } = useTranslation();
  const isEditMode = !!chunkId;

  const isTagParser = parserId === 'tag';
  const onSubmit = useCallback(
    async (values: FieldValues) => {
      const prunedValues = {
        ...values,
        image_base64: await fileToBase64(values.image?.[0] as File),
        tag_feas: transformTagFeaturesArrayToObject(values.tag_feas),
        available_int: checked ? 1 : 0,
      } as FieldValues;

      Reflect.deleteProperty(prunedValues, 'image');

      onOk?.(prunedValues);
    },
    [checked, onOk],
  );

  const handleOk = form.handleSubmit(onSubmit);

  const handleCheck = useCallback(() => {
    setChecked(!checked);
  }, [checked]);

  useEffect(() => {
    if (data?.code === 0) {
      const { available_int, tag_feas } = data.data;

      form.reset({
        ...data.data,
        tag_feas: transformTagFeaturesObjectToArray(tag_feas),
      });

      setChecked(available_int !== 0);
    }
  }, [data, form, chunkId]);

  return (
    <Modal
      title={`${chunkId ? t('chunk.editChunk') : t('chunk.createChunk')}`}
      open={true}
      onOk={handleOk}
      onCancel={hideModal}
      confirmLoading={loading}
      destroyOnClose
    >
      <Form {...form}>
        <div className="flex flex-col gap-4">
          <FormField
            control={form.control}
            name="content_with_weight"
            render={({ field }) => (
              <FormItem>
                <FormLabel>{t('chunk.chunk')}</FormLabel>
                <FormControl>
                  <Textarea
                    {...field}
                    autoSize={{ minRows: 4, maxRows: 10 }}
                    resize="vertical"
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          {/* Do not display the type field in create mode */}
          {isEditMode && (
            <FormField
              control={form.control}
              name="doc_type_kwd"
              render={({ field }) => {
                const chunkType =
                  ((field.value &&
                    String(field.value)?.toLowerCase()) as ChunkDocType) ||
                  'text';

                return (
                  <FormItem>
                    <FormLabel>{t(`chunk.type`)}</FormLabel>
                    <FormControl>
                      <Input
                        type="text"
                        value={t(`chunk.docType.${chunkType}`)}
                        readOnly
                      />
                    </FormControl>
                  </FormItem>
                );
              }}
            />
          )}

          {(!isEditMode || form.getValues('doc_type_kwd') + '' === 'image') && (
            <FormField
              control={form.control}
              name="image"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="gap-1">{t('chunk.image')}</FormLabel>

                  <div className="space-y-4">
                    {data?.data?.img_id && (
                      <Image
                        id={data?.data?.img_id}
                        className="mx-auto w-auto max-w-full object-contain max-h-[800px]"
                      />
                    )}

                    <div className="col-start-2 col-end-3 only:col-span-2">
                      <FormControl>
                        <FileUploader
                          className="h-auto p-6"
                          value={field.value}
                          onValueChange={field.onChange}
                          accept={{
                            'image/png': [],
                            'image/jpeg': [],
                            'image/webp': [],
                          }}
                          maxFileCount={1}
                          hideDropzoneOnMaxFileCount
                          title={t('chunk.imageUploaderTitle')}
                          description={<></>}
                        />
                      </FormControl>
                    </div>
                  </div>
                </FormItem>
              )}
            />
          )}
          <FormField
            control={form.control}
            name="important_kwd"
            render={({ field }) => (
              <FormItem>
                <FormLabel>{t('chunk.keyword')}</FormLabel>
                <FormControl>
                  <EditTag {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="question_kwd"
            render={({ field }) => (
              <FormItem>
                <FormLabel className="flex justify-start items-start">
                  <div className="flex items-center gap-1">
                    <span>{t('chunk.question')}</span>
                    <HoverCard>
                      <HoverCardTrigger asChild>
                        <span className="text-xs mt-[0px] text-center scale-[90%] text-text-secondary cursor-pointer rounded-full w-[17px] h-[17px] border-text-secondary border-2">
                          ?
                        </span>
                      </HoverCardTrigger>
                      <HoverCardContent className="w-80" side="top">
                        {t('chunk.questionTip')}
                      </HoverCardContent>
                    </HoverCard>
                  </div>
                </FormLabel>
                <FormControl>
                  <EditTag {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          {isTagParser && (
            <FormField
              control={form.control}
              name="tag_kwd"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t('knowledgeConfiguration.tagName')}</FormLabel>
                  <FormControl>
                    <EditTag {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          )}
          {!isTagParser && (
            <FormProvider {...form}>
              <TagFeatureItem />
            </FormProvider>
          )}
        </div>
      </Form>

      {chunkId && (
        <section>
          <Divider />
          <Space size={'large'}>
            <div className="flex items-center gap-2">
              {t('chunk.enabled')}
              <Switch checked={checked} onCheckedChange={handleCheck} />
            </div>
            {/* <div className="flex items-center gap-1" onClick={handleRemove}>
              <Trash2 size={16} /> {t('common.delete')}
            </div> */}
          </Space>
        </section>
      )}
    </Modal>
  );
};
export default ChunkCreatingModal;
