'use client'
import { useEffect, useState } from 'react'
import { RiCloseLine } from '@remixicon/react'
import s from './index.module.css'
import cn from '@/utils/classnames'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import { addDept, editDept, fetchDepts } from '@/service/common'
import 'react-multi-email/dist/style.css'
import Input from '@/app/components/base/input'
import { TreeSelect as AntdTreeSelect } from 'antd'

const InviteModal = ({
  transfer,
  onCancel,
  onSend,
}: any) => {
  const [name, setName] = useState<string>(transfer.row?.dept_name || '')
  const [parent, setParent] = useState<string>(transfer.row?.parent_dept_id || '')
  console.log(transfer)
  const [options, setOptions] = useState<any>([])
  useEffect(() => {
    fetchDepts({
      url: '/depts',
    }).then((res: any) => {
      setOptions(res.data || [])
    })
  }, [])
  const handleSave = async () => {
    try {
      let res: any = () => {}
      if (transfer.mode === 'add') {
        res = await addDept({
          url: '/depts',
          body: { dept_name: name, parent_dept_id: parent },
        })
      }
      else {
        res = await editDept({
          url: '/depts',
          body: { dept_name: name, parent_dept_id: parent, dept_id: transfer.row.dept_id },
        })
      }
      const { result }: any = res
      if (result === 'success') {
        onCancel()
        onSend()
      }
    }
    catch (e) { }
  }

  return (
    <div className={cn(s.wrap)}>
      <Modal overflowVisible isShow onClose={() => { }} className={cn(s.modal)}>
        <div className='mb-2 flex justify-between'>
          <div className='text-xl font-semibold text-text-primary'>{transfer.mode === 'add' ? '新增' : '编辑'}部门</div>
          <RiCloseLine className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={onCancel} />
        </div>
        <div>
          <div className={cn('flex flex-wrap items-center justify-between')}>
            <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
              上级部门
            </div>
            <AntdTreeSelect
              showSearch
              style={{ width: '100%' }}
              value={parent}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="请选择上级部门"
              allowClear
              treeDefaultExpandAll
              onChange={(v) => {
                console.log('dept', v)
                setParent(v || '')
              }}
              treeData={options}
              fieldNames={{ label: 'dept_name', value: 'dept_id' }}
            />
          </div>
          <div className={cn('flex flex-wrap items-center justify-between')}>
            <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
              部门名称
            </div>
            <Input
              value={name}
              onChange={e => setName(e.target.value)}
              className='h-9'
              placeholder='请输入部门名称'
            />
          </div>
          <Button
            tabIndex={0}
            className='mt-4 w-full'
            onClick={handleSave}
            disabled={!name.length}
            variant='primary'
          >
            保存
          </Button>
        </div>
      </Modal>
    </div>
  )
}

export default InviteModal