import LabelSelector from '@/components/label-selector';
import CheckboxField from '@/components/seal-form/checkbox-field';
import SealSelect from '@/components/seal-form/seal-select';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import { useMemo } from 'react';
import { modelCategories } from '../config';
import { backendOptionsMap } from '../config/backend-parameters';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
import BackendParametersList from './backend-parameters-list';

const AdvanceConfig = () => {
  const intl = useIntl();
  const form = Form.useFormInstance();
  const EnviromentVars = Form.useWatch('env', form);
  const backend = Form.useWatch('backend', form);
  const { onValuesChange, backendOptions, isGGUF, modelContextData } =
    useFormContext();

  const currentBackendOptions = useMemo(() => {
    return backendOptions?.find((item) => item.value === backend);
  }, [backend, backendOptions]);

  const handleEnviromentVarsChange = (labels: Record<string, any>) => {
    form.setFieldValue('env', labels);
  };

  const onSelectorChange = (field: string, allowEmpty?: boolean) => {
    const workerSelector = form.getFieldValue(field);
    // check if all keys have values
    const hasEmptyValue = _.some(_.keys(workerSelector), (k: string) => {
      return !workerSelector[k];
    });
    if (!hasEmptyValue || allowEmpty) {
      onValuesChange?.({}, form.getFieldsValue());
    }
  };

  const handleEnvSelectorOnBlur = () => {
    onSelectorChange('env', true);
  };

  const handleDeleteEnvSelector = (index: number) => {
    onValuesChange?.({}, form.getFieldsValue());
  };

  const handleContextLengthChange = _.debounce((value: number) => {
    onValuesChange?.({}, form.getFieldsValue());
  }, 300);

  return (
    <>
      <Form.Item<FormData>
        name="categories"
        data-field="categories"
        style={{
          scrollMarginTop: 200
        }}
      >
        <SealSelect
          allowNull
          label={intl.formatMessage({
            id: 'models.form.categories'
          })}
          options={modelCategories}
        ></SealSelect>
      </Form.Item>
      <BackendParametersList></BackendParametersList>
      <Form.Item<FormData> name="env">
        <LabelSelector
          label={intl.formatMessage({
            id: 'models.form.env'
          })}
          labels={EnviromentVars}
          btnText={intl.formatMessage({ id: 'common.button.vars' })}
          onBlur={handleEnvSelectorOnBlur}
          onDelete={handleDeleteEnvSelector}
          onChange={handleEnviromentVarsChange}
        ></LabelSelector>
      </Form.Item>
      {(backend === backendOptionsMap.custom ||
        !currentBackendOptions?.isBuiltIn) && (
        <Form.Item<FormData>
          name="cpu_offloading"
          valuePropName="checked"
          style={{ marginBottom: 8 }}
        >
          <CheckboxField
            description={intl.formatMessage({
              id: 'models.form.partialoffload.tips'
            })}
            label={intl.formatMessage({
              id: 'resources.form.enablePartialOffload'
            })}
          ></CheckboxField>
        </Form.Item>
      )}
      {backend !== backendOptionsMap.voxBox && (
        <Form.Item<FormData>
          name="distributed_inference_across_workers"
          valuePropName="checked"
          style={{ marginBottom: 8 }}
        >
          <CheckboxField
            description={intl.formatMessage({
              id: 'models.form.distribution.tips'
            })}
            label={intl.formatMessage({
              id: 'resources.form.enableDistributedInferenceAcrossWorkers'
            })}
          ></CheckboxField>
        </Form.Item>
      )}
      <Form.Item<FormData>
        name="restart_on_error"
        valuePropName="checked"
        style={{ marginBottom: 8 }}
      >
        <CheckboxField
          description={intl.formatMessage({
            id: 'models.form.restart.onerror.tips'
          })}
          label={intl.formatMessage({
            id: 'models.form.restart.onerror'
          })}
        ></CheckboxField>
      </Form.Item>
      <Form.Item<FormData>
        name="generic_proxy"
        valuePropName="checked"
        style={{ marginBottom: 8 }}
      >
        <CheckboxField
          description={intl.formatMessage({
            id: 'models.form.generic_proxy.tips'
          })}
          label={intl.formatMessage({
            id: 'models.form.generic_proxy'
          })}
        ></CheckboxField>
      </Form.Item>
    </>
  );
};

export default AdvanceConfig;