import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import { Form, InputNumber, Switch, Flex } from 'antd';
import { useTranslation } from 'react-i18next';

import type { RerankerConfig, KnowledgeGlobalConfigModalRef } from './types'
import RbModal from '@/components/RbModal'
import ModelSelect from '@/components/ModelSelect'

const FormItem = Form.Item;

interface KnowledgeGlobalConfigModalProps {
  data: RerankerConfig;
  refresh: (values: RerankerConfig, type: 'rerankerConfig') => void;
}

const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, KnowledgeGlobalConfigModalProps>(({ refresh, data }, ref) => {
  const { t } = useTranslation();
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm<RerankerConfig>();
  const values = Form.useWatch<RerankerConfig>([], form);

  const handleClose = () => {
    setVisible(false);
    form.resetFields();
  };

  const handleOpen = () => {
    form.setFieldsValue({ ...data, rerank_model: !!data?.reranker_id })
    setVisible(true);
  };

  const handleSave = () => {
    form.validateFields()
      .then(() => {
        refresh(values, 'rerankerConfig')
        handleClose()
      })
      .catch((err) => console.log('err', err));
  }

  useEffect(() => {
    if (values?.rerank_model) {
      const { rerank_model, ...rest } = data;
      form.setFieldsValue({ ...rest })
    } else {
      form.setFieldsValue({ reranker_id: undefined, reranker_top_k: undefined })
    }
  }, [values?.rerank_model])

  useImperativeHandle(ref, () => ({ handleOpen }));

  return (
    <RbModal
      title={t('application.globalConfig')}
      open={visible}
      onCancel={handleClose}
      okText={t('common.save')}
      onOk={handleSave}
    >
      <Form form={form} layout="vertical" size="middle">
        <div className="rb:text-[#5B6167] rb:mb-6">{t('application.globalConfigDesc')}</div>
        <Flex align="center" justify="space-between" className="rb:my-6!">
          <div className="rb:text-[14px] rb:font-medium rb:leading-5">
            {t('application.rerankModel')}
            <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t('application.rerankModelDesc')}</div>
          </div>
          <FormItem name="rerank_model" valuePropName="checked" className="rb:mb-0!">
            <Switch />
          </FormItem>
        </Flex>
        {values?.rerank_model && <>
          <FormItem
            name="reranker_id"
            label={t('application.rearrangementModel')}
            rules={[{ required: true, message: t('common.pleaseSelect') }]}
            extra={t('application.rearrangementModelDesc')}
          >
            <ModelSelect params={{ type: 'rerank' }} className="rb:w-full!" />
          </FormItem>
          <FormItem
            name="reranker_top_k"
            label={t('application.reranker_top_k')}
            rules={[{ required: true, message: t('common.pleaseEnter') }]}
            extra={t('application.reranker_top_k_desc')}
          >
            <InputNumber style={{ width: '100%' }} min={1} max={20} onChange={(value) => form.setFieldValue('reranker_top_k', value)} />
          </FormItem>
        </>}
      </Form>
    </RbModal>
  );
});

export default KnowledgeGlobalConfigModal;