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

import { Plus } from '@taroify/icons';
import { useCallback, useState } from 'react';

import { RoleType } from '@/constants/app';
import { CacheKey } from '@/constants/cache-key';
import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
import { GROUPS } from '@/constants/group';
import { getRoleTypeWithDefault } from '@/utils/app';
import { openCustomerServiceChat } from '@/utils/common';
import { getCurrentCityCode } from '@/utils/location';
import { checkCityCode, validCityCode } from '@/utils/user';

import './index.less';

const PREFIX = 'join-group-hint';

const DEFAULT_GROUP = {
  name: '播络主播招聘群',
  serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8',
};

export function JoinGroupHint() {
  const cityCode = getCurrentCityCode();
  const roleType = getRoleTypeWithDefault();
  const group = GROUPS.find(g => String(g.cityCode) === cityCode);
  const [clicked, setClicked] = useState(!!Taro.getStorageSync(CacheKey.JOIN_GROUP_CARD_CLICKED));
  const handleClick = useCallback(() => {
    if (group && !checkCityCode(cityCode)) {
      return;
    }
    openCustomerServiceChat(group ? group.serviceUrl : DEFAULT_GROUP.serviceUrl);
    Taro.setStorageSync(CacheKey.JOIN_GROUP_CARD_CLICKED, true);
    setClicked(true);
  }, [cityCode, group]);
  if (!validCityCode(cityCode) || clicked) {
    return null;
  }

  return (
    <div className={PREFIX}>
      <Image
        className={`${PREFIX}__icon`}
        src="https://publiccdn.neighbourhood.com.cn/img/group-avatar.png"
        mode="aspectFit"
      />
      <div className={`${PREFIX}__left`}>
        <div className={`${PREFIX}__left-title`}>
          {group ? `${CITY_CODE_TO_NAME_MAP.get(cityCode)}主播招聘群` : DEFAULT_GROUP.name}
        </div>
        <div className={`${PREFIX}__left-desc`}>{roleType === RoleType.Anchor ? '高薪工作早知道' : '免费招主播'}</div>
      </div>
      <div className={`${PREFIX}__right`}>
        <Button className={`${PREFIX}__button`} onClick={handleClick}>
          <Plus />
          加入该群
        </Button>
      </div>
    </div>
  );
}