import { Image } from '@tarojs/components';
import { useLoad } from '@tarojs/taro';

import { useState } from 'react';

import { AgreementPopup } from '@/components/agreement-popup';
import Slogan from '@/components/slogan';
import { PageUrl, RoleType } from '@/constants/app';
import { ANCHOR_TAB_LIST, COMPANY_TAB_LIST } from '@/hooks/use-config';
import store from '@/store';
import { changeHomePage } from '@/store/actions';
import { getRoleType, switchDefaultTab, switchRoleType } from '@/utils/app';
import { switchTab } from '@/utils/route';
import { getAgreementSigned, setAgreementSigned } from '@/utils/user';
import './index.less';

const PREFIX = 'page-start';

export default function Start() {
  const [open, setOpen] = useState(typeof getAgreementSigned() !== 'boolean');
  const mode = getRoleType();
  useLoad(() => {
    switchDefaultTab();
  });
  const handleAnchor = async () => {
    await switchRoleType(RoleType.Anchor);
    store.dispatch(changeHomePage(ANCHOR_TAB_LIST[0].type));
    await switchTab(ANCHOR_TAB_LIST[0].pagePath as PageUrl);
  };

  const handleCompany = async () => {
    await switchRoleType(RoleType.Company);
    store.dispatch(changeHomePage(COMPANY_TAB_LIST[0].type));
    await switchTab(COMPANY_TAB_LIST[0].pagePath as PageUrl);
  };

  const handleCancel = () => {
    setOpen(false);
    setAgreementSigned(false);
  };

  const handleConfirm = () => {
    setOpen(false);
    setAgreementSigned(true);
  };
  return (
    <div className={`${PREFIX} ${mode ? '' : 'color-bg'}`}>
      {mode && (
        <div className={`${PREFIX}__app`}>
          <Image className={`${PREFIX}__icon`} mode="aspectFit" src={require('@/statics/svg/slogan.svg')} />
          <div className={`${PREFIX}__text`}>每天推荐海量高薪通告 </div>
        </div>
      )}
      {!mode && (
        <>
          <div className={`${PREFIX}__role-app`}>
            <div className={`${PREFIX}__greet`}>Hi，很高兴见到你</div>
            <div className={`${PREFIX}__title`}>请选择您的身份</div>
            <div className={`${PREFIX}__card`} onClick={handleAnchor}>
              <Image
                className={`${PREFIX}__avatar anchor`}
                src="https://publiccdn.neighbourhood.com.cn/img/avatar_f.png"
                mode="aspectFill"
              />
              <div className={`${PREFIX}__content`}>
                <div className="title">我是主播</div>
                <div className="desc">我要找工作</div>
              </div>
              <Image src={require('@/statics/svg/arrow-right.svg')} mode="aspectFill" className={`${PREFIX}__arrow`} />
            </div>
            <div className={`${PREFIX}__card`} onClick={handleCompany}>
              <Image
                className={`${PREFIX}__avatar company`}
                src="https://publiccdn.neighbourhood.com.cn/img/avatar_m.png"
                mode="aspectFill"
              />
              <div className={`${PREFIX}__content`}>
                <div className="title">我是企业</div>
                <div className="desc">我要招主播</div>
              </div>
              <Image src={require('@/statics/svg/arrow-right.svg')} mode="aspectFill" className={`${PREFIX}__arrow`} />
            </div>
          </div>
          <Slogan />
          <AgreementPopup open={open} onCancel={handleCancel} onConfirm={handleConfirm} />
        </>
      )}
    </div>
  );
}