import { useState, useRef, type FC } from 'react';
import { Button, Flex, Space, type SegmentedProps, Form } from 'antd'
import { useTranslation } from 'react-i18next';

import GroupModelModal from './components/GroupModelModal'
import type { ModelListItem, GroupModelModalRef, CustomModelModalRef, ModelPlazaItem, BaseRef, Query } from './types'
import SearchInput from '@/components/SearchInput'
import PageTabs from '@/components/PageTabs'
import GroupModel from './Group'
import ModelList from './List'
import ModelSquare from './Square'
import CustomModelModal from './components/CustomModelModal'
import CustomSelect from '@/components/CustomSelect'
import { modelTypeUrl, modelProviderUrl } from '@/api/models'

const tabKeys = ['group', 'list', 'square']
const ModelManagement: FC = () => {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState('group');
  const configModalRef = useRef<GroupModelModalRef>(null)
  const customModelModalRef = useRef<CustomModelModalRef>(null)
  const groupRef = useRef<BaseRef>(null)
  const squareRef = useRef<BaseRef>(null)
  const [form] = Form.useForm<Query>()
  const query = Form.useWatch([], form)

  const formatTabItems = () => {
    return tabKeys.map(value => ({
      value,
      label: t(`modelNew.${value}`),
    }))
  }
  const handleChangeTab = (value: SegmentedProps['value']) => {
    setActiveTab(value as string);
    form.resetFields()
  }

  const handleEdit = (vo?: ModelListItem | ModelPlazaItem) => {
    switch(activeTab) {
      case 'group':
        configModalRef?.current?.handleOpen(vo as ModelListItem)
        break
      case 'square':
        customModelModalRef?.current?.handleOpen(vo as ModelPlazaItem)
        break
    }
  }
  const handleRefresh = () => {
    switch (activeTab) {
      case 'group':
        groupRef.current?.getList()
        break
      case 'square':
        squareRef.current?.getList()
        break
    }
  }

  return (
    <>
      <Flex justify="space-between" align="center">
        <PageTabs
          value={activeTab}
          options={formatTabItems()}
          onChange={handleChangeTab}
        />

        <Form form={form}>
          <Space size={12}>
            {activeTab === 'list' &&
              <Form.Item name="type" noStyle>
                <CustomSelect
                  url={modelTypeUrl}
                  hasAll={false}
                  format={(items) => items.map((item) => ({ label: t(`modelNew.${item}`), value: String(item) }))}
                  className="rb:w-30"
                  allowClear={true}
                  placeholder={t('modelNew.type')}
                />
              </Form.Item>
            }
            {(activeTab === 'list' || activeTab === 'square') &&
              <Form.Item name="provider" noStyle>
                <CustomSelect
                  url={modelProviderUrl}
                  hasAll={false}
                  format={(items) => items.map((item) => ({ label: t(`modelNew.${item}`), value: String(item) }))}
                  className="rb:w-30"
                  allowClear={true}
                  placeholder={t('modelNew.provider')}
                />
              </Form.Item>
            }
            {activeTab !== 'list' &&
              <Form.Item name="search" noStyle>
                <SearchInput
                  placeholder={t(`modelNew.${activeTab}SearchPlaceholder`)}
                  className="rb:w-70!"
                />
              </Form.Item>
            }
            {activeTab === 'group' && <Button type="primary" onClick={() => handleEdit()}>+ {t('modelNew.createGroupModel')}</Button>}
            {activeTab === 'square' && <Button type="primary" onClick={() => handleEdit()}>+ {t('modelNew.createCustomModel')}</Button>}
          </Space>
        </Form>
      </Flex>

      <div className="rb:w-full rb:h-[calc(100%-48px)] rb:my-4">
        {activeTab === 'group' && <GroupModel ref={groupRef} query={query} handleEdit={handleEdit} />}
        {activeTab === 'list' && <ModelList query={query} />}
        {activeTab === 'square' && <ModelSquare ref={squareRef} query={query} handleEdit={handleEdit} />}
      </div>
      <GroupModelModal
        ref={configModalRef}
        refresh={handleRefresh}
      />
      <CustomModelModal
        ref={customModelModalRef}
        refresh={handleRefresh}
      />
    </>
  )
}

export default ModelManagement