import {Profile} from "@/store";
import {Image, Text, View} from "@tarojs/components";
import styles from "@/pages/my/my.module.scss";
import avatar from "@/static/img/avatar.png"
import blacktriang from "@/static/img/blacktriangle.png"
import {FC, useMemo} from "react";
import Img from "@/components/image/image";

interface Props {
  companyList: Company[]
  showCompany: () => void
}

const Header: FC<Props> = ({companyList, showCompany}) => {
  const {token, user, company, empty} = Profile.useContainer()
  const login = () => empty()

  const showChoose = useMemo(() => (token?.length ?? 0) > 0 && companyList.length >2, [token, companyList])

  return (
    <View className={styles.header}>
      <View className='flex'>
        <Img width={100} height={100} src={user?.avatar || avatar} className={`${styles.avatar} rounded-50`} errorType='avatar' onClick={token ? undefined : login} />
        <View className='flex-1 flex flex-column justify-start align-start mt-1'>
          <View className='font-32' onClick={token ? undefined : login}>{token ? user?.name ?? '匿名' : '请登录'}</View>
          <View className='flex align-center mt-1' onClick={token ? showCompany : login}>
            <Text style={{fontSize: '24rpx', fontWeight: '500', color: '#323635'}}>{token ? company?.name : '登录解锁更多功能哦'}</Text>
            {showChoose && <Image src={blacktriang} style={{width: '20rpx', height: '20rpx'}}/>}
          </View>
        </View>
      </View>
    </View>
  )
}

export default Header