import { useEffect } from 'react'
import { Row, Col, Space, Descriptions, Avatar, Tag, Divider, List, Alert, Button, Flex, Select, Spin, Form, Typography, QRCode, Tooltip } from 'antd'
import { UserOutlined, InfoCircleOutlined, CloseCircleFilled, ReloadOutlined, CheckCircleFilled } from '@ant-design/icons'
import useAuthStore from '@/stores/AuthStore'

function Profile() {
  const [loginUser, setWhatsAppBusiness] = useAuthStore((state) => [state.loginUser, state.setWhatsAppBusiness])

  useEffect(() => {
    // 测试错误捕获：
    // throw new Error('💥 CABOOM 💥')
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const customStatusRender = (info) => {
    switch (info.status) {
      case 'expired':
        return (
          <div>
            <CheckCircleFilled
              style={{
                color: '#52c41a',
              }}
            />{' '}
            8618754124786 已登录
            <p>
              <Button type='link' onClick={info.onRefresh}>
                <ReloadOutlined /> {info.locale?.refresh}
              </Button>
            </p>
          </div>
        )
      case 'loading':
        return (
          <Space direction='vertical'>
            <Spin />
            <p>Loading...</p>
          </Space>
        )
      case 'scanned':
        return (
          <div>
            <CheckCircleFilled
              style={{
                color: 'green',
              }}
            />{' '}
            {info.locale?.scanned}
          </div>
        )
      default:
        return null
    }
  }

  return (
    <>
      <Row>
        <Col span={6} offset={6}>
          <Descriptions title='个人资料' layout='vertical' column={1}>
            <Descriptions.Item label='名字'>
              <Space size='middle'>
                <Avatar src={loginUser.avatarUrl}>{loginUser.username.substring(1)}</Avatar>
                {loginUser.username}
              </Space>
            </Descriptions.Item>
            <Descriptions.Item label='HT 账号'>
              {loginUser.accountList?.map((a) => {
                return (
                  <Tag key={a.OPI_Code} icon={<UserOutlined />} bordered={false}>
                    {a.OPI_Code}
                  </Tag>
                )
              })}
            </Descriptions.Item>

            <Descriptions.Item
              label={
                <Space>
                  <Tooltip title='你所属的业务部门'>
                    <InfoCircleOutlined />
                  </Tooltip>
                  <span>商业号身份</span>
                </Space>
              }>
              <Form
                layout='vertical'
                // form={form}
              >
                <Form.Item>
                  <Select
                    defaultValue='8617607730395'
                    options={[
                      {
                        value: '8618174165365',
                        label: 'GH 客服(8618174165365)',
                      },
                      {
                        value: '8617607730395',
                        label: 'GH 顾问(8617607730395)',
                      },
                      {
                        value: '191477856351',
                        label: 'GH 客运(191477856351)',
                      },
                      {
                        value: '国际事业部',
                        label: '国际事业部(无)',
                        disabled: true,
                      },
                      {
                        value: 'CT 事业部',
                        label: 'CT 事业部(无)',
                        disabled: true,
                      },
                      {
                        value: '花梨鹰事业部',
                        label: '花梨鹰事业部(无)',
                        disabled: true,
                      },
                    ]}
                  />
                </Form.Item>
                <Form.Item>
                  <Button
                    type='primary'
                    onClick={() => {
                      setWhatsAppBusiness(383, 8617607730395)
                    }}>
                    保存
                  </Button>
                </Form.Item>
              </Form>
            </Descriptions.Item>
          </Descriptions>
        </Col>
        <Col span={6}>
          <List
            header={<div>邮箱</div>}
            dataSource={loginUser.emailList}
            renderItem={(item) => {
              const isDefault = item.default ? <Tag color='green'>默认</Tag> : null
              const isBackup = item.backup ? <Tag color='cyan'>备用</Tag> : null
              return (
                <List.Item>
                  {item.email} {isDefault}
                  {isBackup}
                </List.Item>
              )
            }}
          />
        </Col>
      </Row>
      <Divider orientation='left'></Divider>
      <Row>
        <Col span={6} offset={6}>
          <Typography>
            <Typography.Title level={2}>在系统上使用 WhatsApp</Typography.Title>
            <Typography.Paragraph>
              <ul>
                <li>在手机上打开 WhatsApp</li>
                <li>点击“已关联的设备”，再点击“关联新设备”</li>
                <li>将手机对准屏幕扫描二维码➡️</li>
              </ul>
            </Typography.Paragraph>
          </Typography>
        </Col>
        <Col span={6}>
          <Flex gap='middle' vertical justify={'center'} align={'center'}>
            <QRCode size={264} value={'https://web.whatsapp.com/'} status='expired' statusRender={customStatusRender} />
          </Flex>
        </Col>
      </Row>
    </>
  )
}

export default Profile
