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

import { Cell } from '@taroify/core';
import { useCallback } from 'react';

import MaterialCard from '@/components/material-card';
import WechatCell from '@/components/wx-cell';
import { RoleType, PageUrl } from '@/constants/app';
import { switchRoleType } from '@/utils/app';
import { navigateTo } from '@/utils/route';

import './index.less';

const PREFIX = 'user-fragment-anchor';

export default function AnchorFragment() {
  const handleClickMyDeclaration = useCallback(() => navigateTo(PageUrl.MyDeclaration), []);

  const handleClickSwitch = useCallback(() => switchRoleType(RoleType.Company), []);

  const handleClickInviteOperations = useCallback(() => navigateTo(PageUrl.InviteOperations), []);

  return (
    <div className={PREFIX}>
      <MaterialCard />
      <WechatCell className={`${PREFIX}__cell`} />
      <Cell
        isLink
        align="center"
        title="我联系的通告"
        className={`${PREFIX}__cell`}
        onClick={handleClickMyDeclaration}
      />
      <Cell
        isLink
        align="center"
        title="免费领主播会员"
        className={`${PREFIX}__cell`}
        onClick={handleClickInviteOperations}
      />
      <Image
        mode="widthFix"
        className={`${PREFIX}__switch-to-company`}
        src="https://neighbourhood.cn/zhao_zhubo_1.png"
        onClick={handleClickSwitch}
      />
    </div>
  );
}