import { CheckOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Drawer, Input, Modal, Popconfirm, Select } from 'antd';
import React, { useEffect, useState } from 'react'
import { Shell } from '../../utils/shell';
import { tools } from '../../utils/shell/tools';
import Button from '../../components/Button';
import { isMobile } from '../../utils/helper';

interface DefaultListPopupProps {
  defaultVisible: boolean

  multipleDefault: string
  selectTmpShow: boolean
  props: any
  defaultOnOk: (tempName?: string, tempKey?: string) => void
  defaultClose: () => void
  onCancel: () => void
  onDrawerCancel: () => void
  defaultList: any[]
  onChange: (tempName: string) => void
  defaultDelete: (tempKey: string) => void
  defaultModify: (e: any, tempKey: string, tempName: string) => void
  defaultAdvancedQuery: (data: 1 | 2 | 3, body: any) => void
}


const DefaultListPopup: React.FC<DefaultListPopupProps> = ({ defaultVisible, multipleDefault, props, selectTmpShow, defaultOnOk, defaultList, defaultClose, onCancel, onChange, defaultDelete, defaultModify, onDrawerCancel, defaultAdvancedQuery }) => {
  const [tempName, setTempName] = useState<string>()
  const [tempKey, setTempKey] = useState<string>()
  const [clearOpen, setClearOpen] = useState(false)
  const { translate: __, env } = props;

  useEffect(() => {
    if (selectTmpShow)
      if (defaultList.length > 0) {
        setTempName(defaultList[0].tempName)
        setTempKey(defaultList[0].tempKey)
      }
  }, [selectTmpShow])
  const renderSelectFooter = () => {
    const defaultType = (defaultList.length > 0 && defaultList[0].tempKey !== tempKey) ? true : false

    return <>
      <Button disabled={!tempKey} onClick={(e: any) => { !!tempKey && !!tempName && defaultModify(e, tempKey, tempName) }} size="md">
        {__('rename')}
      </Button>
      <Button disabled={!tempKey} onClick={() => { !!tempKey && setClearOpen(true) }} size="md">
        {__('Select.clear')}
      </Button>
      <Button disabled={!tempKey} onClick={() => { defaultOnOk(tempName, tempKey); defaultType && defaultAdvancedQuery(2, { tempName, tempKey }); setTempName(undefined); setTempKey(undefined) }} size='md' level='primary'>
        {'应用'}
      </Button>
    </>
  }

  return (
    <>
      {
        defaultList && <Drawer
          zIndex={1011}
          placement='bottom'
          mask
          className={`columns-toggler-drawer columns-toggler-tmp-sel ${tools.isIOS && !Shell.hasShell() ? 'ios-device' : ''}`}
          width='100vw'
          height={defaultList.length * 45 + 130 + (tools.isIOS ? 32 : 0) + 'px'}
          title={__('selectTemplate')}
          visible={selectTmpShow}
          destroyOnClose
          getContainer={env.getModalContainer}
          onClose={() => { onDrawerCancel(); setTempName(undefined); setTempKey(undefined) }}
          footer={renderSelectFooter()}
        >
          <div className='tpm-sel-container'>
            {
              defaultList.map(item =>
                <div
                  className={`tem-sel-item ${item.tempKey === tempKey ? 'active-tmp' : ''}`}
                  key={item.tempKey}
                  onClick={() => { setTempKey(item.tempKey); setTempName(item.tempName) }}>
                  <div>{item.tempName}</div>
                  {tempKey === item.tempKey && <div><CheckOutlined /></div>}
                </div>)
            }
          </div>
        </Drawer>
      }
      <Modal
        zIndex={1011}
        className={`${isMobile() ? 'defaultModal-isMobile' : ''} defaultModal`}
        width={isMobile() ? '80%' : 370}
        visible={defaultVisible}
        onOk={() => {
          defaultOnOk()
          setTempName(undefined)
          setTempKey(undefined)
        }}
        centered={isMobile()}
        afterClose={() => { defaultVisible && defaultClose() }}
        destroyOnClose
        title={defaultVisible ? "设置默认值" : "应用默认查询"}
        onCancel={onCancel}
        okText={defaultVisible ? '保存' : '应用'}
        cancelText={__('cancel')}
        getContainer={env.getModalContainer}
      >
        {defaultVisible && <>
          {!isMobile() && <span>默认值名称</span>}
          <Input placeholder="请输入配置名称" value={multipleDefault} onChange={(e) => onChange(e.target.value ?? '')} />
        </>}

      </Modal>
      <Drawer
        zIndex={1011}
        placement='bottom'
        mask
        className={`columns-toggler-drawer columns-toggler-tmp-sel ${tools.isIOS && !Shell.hasShell() ? 'ios-device' : ''} ${isMobile() ? "columns-toggler-drawer-isMobile" : ""}`}
        width='100vw'
        height={2 * 60 + 20 + (tools.isIOS ? 32 : 0) + 'px'}
        visible={clearOpen}
        destroyOnClose
        closable={false}
        getContainer={env.getModalContainer}
        onClose={() => { setClearOpen(false) }}
        footer={null}
      >
        <Button onClick={() => { !!tempKey && defaultDelete(tempKey); setClearOpen(false), setTempKey(undefined) }} size='lg' level='primary'>
          确认删除
        </Button>
        <Button onClick={() => { setClearOpen(false) }} size='lg' level='primary'>
          取消
        </Button>
      </Drawer>
    </>
  )
}


export default DefaultListPopup