import { apiInterceptors, getChunkStrategies, getDocumentList, syncBatchDocument } from '@/client/api';
import { File, IChunkStrategyResponse, ISyncBatchParameter, StepChangeParams } from '@/types/knowledge';
import { Alert, Button, Collapse, Form, Spin, message } from 'antd';
import Icon from '@ant-design/icons';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import StrategyForm from './strategy-form';
import { DoneIcon, PendingIcon, SyncIcon, FileError } from '@/components/icons';

type IProps = {
  spaceName: string;
  docType: string;
  handleStepChange: (params: StepChangeParams) => void;
  uploadFiles: Array<File>;
};

type FieldType = {
  fileStrategies: Array<ISyncBatchParameter>;
};

let intervalId: string | number | NodeJS.Timeout | undefined;

export default function Segmentation(props: IProps) {
  const { spaceName, docType, uploadFiles, handleStepChange } = props;
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const [files, setFiles] = useState(uploadFiles);
  const [loading, setLoading] = useState<boolean>();
  const [strategies, setStrategies] = useState<Array<IChunkStrategyResponse>>([]);
  const [syncStatus, setSyncStatus] = useState<string>('');

  async function getStrategies() {
    setLoading(true);
    const [, allStrategies] = await apiInterceptors(getChunkStrategies());
    setLoading(false);
    setStrategies((allStrategies || [])?.filter((i) => i.type.indexOf(docType) > -1));
  }

  useEffect(() => {
    getStrategies();
    return () => {
      intervalId && clearInterval(intervalId);
    };
  }, []);

  const handleFinish = async (data: FieldType) => {
    if (checkParameter(data)) {
      setLoading(true);
      const [, result] = await apiInterceptors(syncBatchDocument(spaceName, data.fileStrategies));
      setLoading(false);
      if (result?.tasks && result?.tasks?.length > 0) {
        message.success(`Segemation task start successfully. task id: ${result?.tasks.join(',')}`);
        setSyncStatus('RUNNING');
        const docIds = data.fileStrategies.map((i) => i.doc_id);
        intervalId = setInterval(async () => {
          const status = await updateSyncStatus(docIds);
          if (status === 'FINISHED') {
            clearInterval(intervalId);
            setSyncStatus('FINISHED');
            message.success('Congratulation, All files sync successfully.');
            handleStepChange({
              label: 'finish',
            });
          }
        }, 3000);
      }
    }
  };

  function checkParameter(data: FieldType) {
    let checked = true;
    if (syncStatus === 'RUNNING') {
      checked = false;
      message.warning('The task is still running, do not submit it again.');
    }
    const { fileStrategies } = data;
    fileStrategies.map((item) => {
      const name = item?.chunk_parameters?.chunk_strategy;
      if (!name) {
        // set default strategy
        item.chunk_parameters = { chunk_strategy: 'Automatic' };
      }
      const strategy = strategies.filter((item) => item.strategy === name)[0];
      const newParam: any = {
        chunk_strategy: item?.chunk_parameters?.chunk_strategy,
      };
      if (strategy && strategy.parameters) {
        // remove unused parameter, otherwise api will failed.
        strategy.parameters.forEach((param) => {
          const paramName = param.param_name;
          newParam[paramName] = (item?.chunk_parameters as any)[paramName];
        });
      }
      item.chunk_parameters = newParam;
    });
    return checked;
  }

  async function updateSyncStatus(docIds: Array<number>) {
    const [, docs] = await apiInterceptors(
      getDocumentList(spaceName, {
        doc_ids: docIds,
      }),
    );
    if (docs?.data && docs?.data.length > 0) {
      const copy = [...files!];
      // set file status one by one
      docs?.data.map((doc) => {
        const file = copy?.filter((file) => file.doc_id === doc.id)?.[0];
        if (file) {
          file.status = doc.status;
        }
      });
      setFiles(copy);
      // all doc sync finished
      if (docs?.data.every((item) => item.status === 'FINISHED' || item.status === 'FAILED')) {
        return 'FINISHED';
      }
    }
  }

  function renderStrategy() {
    if (!strategies || !strategies.length) {
      return <Alert message={`Cannot find one strategy for ${docType} type knowledge.`} type="warning" />;
    }
    return (
      <Form.List name="fileStrategies">
        {(fields) => {
          switch (docType) {
            case 'TEXT':
            case 'URL':
              return fields?.map((field) => (
                <StrategyForm strategies={strategies} docType={docType} fileName={files![field.name].name} field={field} />
              ));
            case 'DOCUMENT':
              return (
                <Collapse defaultActiveKey={0} size={files.length > 5 ? 'small' : 'middle'}>
                  {fields?.map((field) => (
                    // field [{name: 0, key: 0, isListField: true, fieldKey: 0}, {name: 1, key: 1, isListField: true, fieldKey: 1}]
                    <Collapse.Panel header={`${field.name + 1}. ${files![field.name].name}`} key={field.key} extra={renderSyncStatus(field.name)}>
                      <StrategyForm strategies={strategies} docType={docType} fileName={files![field.name].name} field={field} />
                    </Collapse.Panel>
                  ))}
                </Collapse>
              );
          }
        }}
      </Form.List>
    );
  }

  function renderSyncStatus(index: number) {
    const status = files![index].status;
    switch (status) {
      case 'FINISHED':
        return <Icon component={DoneIcon} />;
      case 'RUNNING':
        return <Icon className="animate-spin animate-infinite" component={SyncIcon} />;
      case 'FAILED':
        return <Icon component={FileError} />;
      default:
        return <Icon component={PendingIcon} />;
    }
  }

  return (
    <Spin spinning={loading}>
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        labelAlign="right"
        form={form}
        size="large"
        className="mt-4"
        layout="horizontal"
        name="basic"
        autoComplete="off"
        initialValues={{
          fileStrategies: files,
        }}
        onFinish={handleFinish}
      >
        {renderStrategy()}
        <Form.Item className="mt-4">
          <Button
            onClick={() => {
              handleStepChange({ label: 'back' });
            }}
            className="mr-4"
          >{`${t('Back')}`}</Button>
          <Button type="primary" htmlType="submit" loading={loading || syncStatus === 'RUNNING'}>
            {t('Process')}
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  );
}
