import { useState } from 'react';
import { Input, Button, Tooltip } from 'antd';
import { WechatOutlined } from '@easyv/react-icons';
import { sendInvited } from '@/server';
import logo from '../../assets/img/logo-pure.png';
import wechat from '../../assets/img/wechat.png';
import styles from './index.module.less';

const { Search } = Input;

export default function Invite() {
  const [code, setCode] = useState('');
  const [isError, setError] = useState(false);

  const handleInvited = () => {
    if (code) {
      sendInvited(code)
        .then(() => {
          window.location.href = '/';
        })
        .catch((e) => {
          setError(true);
        });
    } else {
    }
  };

  return (
    <div
      className="w-screen h-screen flex items-center justify-center"
      style={{ background: '#181B24' }}>
      <div className={styles.card}>
        <img className={styles.logo} src={logo} alt="" />
        <h1 className="text-white text-xl font-normal mt-8 mb-16">
          EasyTwin 数字孪生融合渲染引擎权限激活
        </h1>
        <Input
          placeholder="请输入邀请码"
          className="text-center"
          style={{ height: 48 }}
          status={isError ? 'error' : ''}
          value={code}
          onChange={(e) => {
            setError(false);
            setCode(e.target.value);
          }}
        />
        {isError ? (
          <div className="mt-3" style={{ color: '#EB515A' }}>
            无效邀请码，请核对或联系官方人员
          </div>
        ) : null}
        <Button
          block
          type="primary"
          className="mt-6"
          size="large"
          style={{ height: 48 }}
          onClick={handleInvited}>
          提交
        </Button>
        <div className="mt-23 text-sm flex items-center justify-center">
          <span>没有邀请码？联系</span>
          <Tooltip
            overlayInnerStyle={{ padding: 0 }}
            overlay={
              <div className="w-48 h-48 p-6 bg-[#2E323E]">
                <img src={wechat} alt="二维码" />
              </div>
            }>
            <span className="text-white flex items-center mr-2 cursor-pointer">
              <WechatOutlined className="ml-2 mr-1 mt-1 text-lg" />
              <span>官方客服</span>
            </span>
          </Tooltip>
          <span>获取</span>
        </div>
        {/* <Search placeholder="添加邀请码" enterButton="提交" size="large" onSearch={handleInvited} /> */}
      </div>
    </div>
  );
}