import { Button, Image } from '@tarojs/components';
import { useShareAppMessage } from '@tarojs/taro';

import { useCallback } from 'react';

import CustomNavigationBar from '@/components/custom-navigation-bar';
import HomePage from '@/components/home-page';
import LoginButton from '@/components/login-button';
import PartnerEntry from '@/components/partner-entry';
import Slogan from '@/components/slogan';
import SwitchBar from '@/components/switch-bar';
import { RoleType, PageUrl, PageType } from '@/constants/app';
import AnchorFragment from '@/fragments/user/anchor';
import CompanyFragment from '@/fragments/user/company';
import useUserInfo from '@/hooks/use-user-info';
import useRoleType from '@/hooks/user-role-type';
import { switchRoleType } from '@/utils/app';
import { logWithPrefix, openCustomerServiceChat } from '@/utils/common';
import { navigateTo } from '@/utils/route';
import { getCommonShareMessage } from '@/utils/share';

import './index.less';

const PREFIX = 'page-user';
const log = logWithPrefix(PREFIX);

export default function User() {
  const roleType = useRoleType();
  const userInfo = useUserInfo();
  log('roleType', roleType);

  const handleSwitchRoleType = useCallback(() => switchRoleType(), []);

  const handleClickEdit = useCallback(() => navigateTo(PageUrl.UserInfo), []);

  const handleContact = useCallback(
    () => openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfcd60708731367168d'),
    []
  );

  useShareAppMessage(() => getCommonShareMessage({ useCapture: false }));

  return (
    <HomePage type={PageType.User}>
      <CustomNavigationBar className={`${PREFIX}__navigation-bar`}>
        <SwitchBar title={roleType === RoleType.Anchor ? '切换为企业' : '切换为主播'} onClick={handleSwitchRoleType} />
      </CustomNavigationBar>
      <div className={`${PREFIX} ${PREFIX}--${roleType}`}>
        <div className={`${PREFIX}__header`}>
          <Image
            mode="aspectFill"
            className={`${PREFIX}__header__avatar`}
            src={userInfo.avatarUrl || require('@/statics/png/default_avatar.png')}
          />
          <div className={`${PREFIX}__header__material`}>
            <div className={`${PREFIX}__header__user-info`}>
              <div className={`${PREFIX}__header__nickname`}>{userInfo.nickName}</div>
              <LoginButton className={`${PREFIX}__header__edit-user-info`} onClick={handleClickEdit}>
                编辑
              </LoginButton>
            </div>
            <div className={`${PREFIX}__header__welcome`}>播络 | 汇聚全网好通告</div>
          </div>
          <Button className={`${PREFIX}__header__contact`} onClick={handleContact}>
            <Image
              mode="aspectFit"
              className={`${PREFIX}__header__contact-icon`}
              src={require('@/statics/svg/contact.svg')}
            />
          </Button>
        </div>
        <PartnerEntry />
        {roleType === RoleType.Anchor && <AnchorFragment />}
        {roleType === RoleType.Company && <CompanyFragment />}
      </div>
      <Slogan />
    </HomePage>
  );
}