import React, { useCallback, useEffect, useRef, useState } from 'react'
import { Button, Input, message, Popconfirm, Select } from 'antd'
import { CheckOutlined, CloseOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { Icon } from '../../../../components/icons';
import { CRUDProps } from '../../types'
import { DefaultTemplateData } from './types';
import { uuid } from '../../../../utils/helper';

interface IProps {
  columnInfo: DefaultTemplateData
  onChange: (columnInfo: DefaultTemplateData) => void
  onConfirm: () => void
  onReset: (selectedTempData?: DefaultTemplateData) => void
}

const ModalFooter: React.FC<IProps & Pick<CRUDProps, 'advancedFilterApi' | 'translate' | 'env' | 'classnames'>> = (props) => {

  const { env, translate: __, advancedFilterApi, columnInfo, onChange, onConfirm, onReset } = props

  const [isEdit, setIsEdit] = useState(false)

  const [selectedTempKey, setSelectedTempKey] = useState('')

  const [templateDatas, setTemplateDatas] = useState<{ tempName: string, tempKey: string, columnInfo: DefaultTemplateData }[]>([])

  const inputValue = useRef<string>('')

  useEffect(() => {
    handleGet()
  }, [])

  const handleGet = async () => {
    const { selectApi } = advancedFilterApi
    const { ok, data } = await env.fetcher(selectApi)

    if (ok && Array.isArray(data) && data.length > 0) {
      setTemplateDatas(data)
      setSelectedTempKey(data[0].tempKey)
      onChange(data[0].columnInfo)
    } else {
      setTemplateDatas([])
    }
  }

  const handleSave = useCallback(async (tempKey: string, tempName: string) => {
    const { modifyApi } = advancedFilterApi
    const api = Object.assign({}, modifyApi, { data: { tempName, tempKey, columnInfo } })
    const { status, msg } = await env.fetcher(api)
    status === 0 ? message.success(msg) : message.error(msg)
  }, [columnInfo])

  const handleDelete = async (tempKey: string) => {
    const { deleteApi } = advancedFilterApi
    const api = Object.assign({}, deleteApi, { url: `${deleteApi.url}&tempKey=${tempKey}` })
    const { status, msg } = await env.fetcher(api)
    status === 0 ? message.success(msg) : message.error(msg)
    handleGet()
  }

  return (
    <div className='defaultModal-footer'>
      <div className='defaultModal-footer-left'>
        <Button type="primary" disabled={isEdit} onClick={() => { setIsEdit(true); inputValue.current = '' }} >
          + 新增默认
        </Button>
        {isEdit ? (
          <div className='template-name'>
            <Input placeholder="请输入模版名称" onChange={(e) => inputValue.current = e.target.value} />
            <Button style={{ margin: 0 }} onClick={() => { setIsEdit(false); handleSave(uuid(), inputValue.current) }} >
              <CheckOutlined />
            </Button>
            <Button style={{ margin: 0 }} onClick={() => { setIsEdit(false) }} >
              <CloseOutlined />
            </Button>
          </div>
        ) :
          <div>
            {templateDatas.length > 0 &&
              <Select
                className='defaultModal-select-content'
                dropdownClassName={`dropdown-select-style`}
                bordered
                style={{ textAlign: 'left' }}
                getPopupContainer={env.getModalContainer}
                defaultActiveFirstOption
                suffixIcon={<Icon symbol icon={'#icon-tooltool_down'} className="icon" />}
                value={selectedTempKey}
                onChange={(value) => {
                  setSelectedTempKey(value)
                  const target = templateDatas.find(data => data.tempKey == value)!
                  // handleSave(value, target.tempName, target.columnInfo)
                  onChange(target.columnInfo)
                }}
              >
                {templateDatas.map(item => (
                  <Select.Option value={item.tempKey} key={item.tempKey} className='defaultModal-select-content-option'>
                    <div className='defaultModal-select-content-option-tempName'>{item.tempName}</div>
                    <div className='defaultModal-select-content-option-click' onClick={e => e.stopPropagation()} >
                      <EditOutlined onClick={e => { }} />
                      <Popconfirm
                        title="确定要删除吗?"
                        okText={__('confirm')}
                        cancelText={__('cancel')}
                        onConfirm={() => handleDelete(item.tempKey)}
                      >
                        <DeleteOutlined />
                      </Popconfirm>
                    </div>
                  </Select.Option>
                ))}
              </Select>}
          </div>}
      </div>
      <div className='defaultModal-footer-right'>
        {advancedFilterApi && <>
          {// 2025-02 更新逻辑为 有默认模版列表则显示设置默认按钮
            templateDatas.length > 0 && (
              <span style={{ display: 'inline-block', marginRight: 10 }}>
                <Button
                  disabled={isEdit}
                  type="primary"
                  onClick={() => { handleSave(selectedTempKey, templateDatas.find(data => data.tempKey == selectedTempKey)!.tempName)}}>
                  {__('default')}
                </Button>
              </span>
            )
          }
        </>}
        <span style={{ display: 'inline-block', marginRight: 10 }}>
          <Button onClick={() => { onReset( templateDatas.find(data => data.tempKey == selectedTempKey)?.columnInfo) }} >
            {__('reset')}
          </Button>
        </span>
        <Button
          type="primary"
          onClick={onConfirm} >
          {__('confirm')}
        </Button>
      </div>
    </div>
  )
}

export default ModalFooter