import React, { useState } from 'react'
import { Button, Switch, Form, Tooltip, Icon } from 'tntd'
import { AssignUserModal, UserRoleSelector } from './index'

const service = {
  queryUsers: () =>
    Promise.resolve(
      new Array(200).fill(0).map((_, i) => ({
        uuid: '01b038f151ef4dd5a3509b0aaee01042' + i,
        username: 'wxf' + i,
        nickname: '用户——' + i,
      }))
    ),
  queryRole: () =>
    Promise.resolve(
      new Array(3).fill(0).map((_, i) => ({
        uuid: '025d20ffaf46466d993ed28100d8d17d1' + i,
        code: '普通用户' + i,
        name: '角色' + i,
        orgUuid: 'a8202aea546f48979754bdd45c471b08',
        type: 'default',
      }))
    ),
  countUsers: () => Promise.resolve(24),
}

const EditForm = Form.create()(
  ({ form, value: edit, onSubmit, role, setEdit }) => {
    const onChange = (value) => {
      console.log('onChange:)', value)
    }
    const [disabled, setDisabled] = useState(false)
    return (
      <>
        <Form form={form}>
          <Form.Item label="禁用用户选择">
            <Switch onChange={(checked) => setDisabled(checked)} />
          </Form.Item>
          <Form.Item label="用户角色选择" name="userRole">
            {form.getFieldDecorator('userRole', {
              initialValue: edit,
              rules: [
                {
                  validator: (rule, val, cb) => {
                    if (!val?.usernames?.length && !val?.roleUuids?.length) {
                      cb('请选择用户或角色')
                    } else {
                      cb()
                    }
                  },
                },
              ],
            })(
              <UserRoleSelector
                visible
                disabled={disabled}
                onChange={onChange}
                onClose={() => setEdit()}
                onSubmit={onSubmit}
                service={service}
                help={<Tooltip title="提示文案提示文案">
                  <Icon type="question-circle" />
                </Tooltip>}
                disableRole={role}
              />
            )}
          </Form.Item>
        </Form>
      </>
    )
  }
)

export const BasicAssignUserModal = () => {
  const [edit, setEdit] = useState({
    uuid: 1,
    users: ['wxf1', 'wxf3'],
    roles: ['025d20ffaf46466d993ed28100d8d17d1'],
  })
  const [userRoleInfo, setUserRoleInfo] = useState({
    usernames: ['wxf1', 'wxf3'],
    roleUUids: ['025d20ffaf46466d993ed28100d8d17d1'],
  })
  const [role, setRole] = useState(false)
  const onSubmit = (values) => {
    setEdit()
  }
  return (
    <>
      <Button
        onClick={() =>
          setEdit({
            uuid: 1,
            users: ['wxf1', 'wxf3'],
            roles: ['025d20ffaf46466d993ed28100d8d17d1'],
          })
        }
      >
        分配权限
      </Button>
      <Switch checked={role} onChange={setRole} />
      禁用机构
      <AssignUserModal
        visible={!!edit}
        value={edit}
        onClose={() => setEdit()}
        onSubmit={onSubmit}
        service={service}
        disableRole={role}
        getDisplayUser={(user) => {
          return `${user.nickname}(${user.username})`
        }}
        getDisplayRole={(role) => {
          return `${role.name}(${role.code})`
        }}
        help={<Tooltip title="提示文案提示文案">
          <Icon type="question-circle" />
        </Tooltip>}
      />
      <EditForm value={userRoleInfo} setEdit={setUserRoleInfo} role={role} />
    </>
  )
}