import { useShareAppMessage } from '@tarojs/taro';
import { Button, Tabs } from '@taroify/core';
import { useCallback } from 'react';

import HomePage from '@/components/home-page';
import SearchCity from '@/components/search-city';
import UserBatchPublish from '@/components/user-batch-publish';
import { GROUPS } from '@/constants/group';
import { openCustomerServiceChat } from '@/utils/common';
import { getCurrentCityCode } from '@/utils/location';
import { getCommonShareMessage } from '@/utils/share';
import './index.less';

const PREFIX = 'page-biz-service';

export default function BizService() {
  const handleOpenService = useCallback(() => {
    openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfc4fcf6b109b3771d7');
  }, []);
  const handleSelectCity = useCallback(cityCode => {
    const group = GROUPS.find(g => String(g.cityCode) === cityCode);
    if (group) {
      openCustomerServiceChat(group.serviceUrl);
    }
  }, []);
  useShareAppMessage(() => getCommonShareMessage());

  return (
    <HomePage>
      <div className={PREFIX}>
        <Tabs className={`${PREFIX}__tabs`} defaultValue={1}>
          <Tabs.TabPane value={0} title="主播群">
            <SearchCity onSelectCity={handleSelectCity} currentCity={getCurrentCityCode()} forGroup offset={72} />
          </Tabs.TabPane>
          <Tabs.TabPane value={1} title="群代发">
            <UserBatchPublish />
          </Tabs.TabPane>
          <Tabs.TabPane value={2} title="代招">
            <div className={`${PREFIX}__recruitment`}>
              <div className={`${PREFIX}__recruitment-card`}>
                <div className={`${PREFIX}__recruitment-h5`}>服务城市</div>
                <div className={`${PREFIX}__recruitment-body`}>江、沪、皖-上海、南京、合肥</div>
                <div className={`${PREFIX}__recruitment-body`}>粤、闽-广州、深圳、佛山、厦门、福州、泉州</div>
                <div className={`${PREFIX}__recruitment-body`}>京、鲁-北京、青岛</div>
                <div className={`${PREFIX}__recruitment-body`}>鄂、豫、湘、陕-长沙、武汉、郑州、西安</div>
                <div className={`${PREFIX}__recruitment-body`}>川、渝、云-成都、重庆、昆明</div>
                <div className={`${PREFIX}__recruitment-h5`}>服务方式及收费标准</div>
                <div className={`${PREFIX}__recruitment-body`}>服务方式：提供录屏和基本资料供挑选，挑中安排面试</div>
                <div className={`${PREFIX}__recruitment-body`}>收费标准：安排一场面试200元</div>
                <div className={`${PREFIX}__recruitment-body`}>收费方式：预付费，按安排面试场数扣费</div>
                <div className={`${PREFIX}__recruitment-h5`}>服务能力</div>
                <div className={`${PREFIX}__recruitment-body`}>
                  我们在每个城市均有数量众多的主播群，少则几十个，多则上千个，有各种类型和层次的带货主播资源
                </div>
                <div className={`${PREFIX}__recruitment-btn-group`}>
                  <Button className={`${PREFIX}__recruitment-btn`} onClick={handleOpenService}>
                    点此咨询
                  </Button>
                </div>
              </div>
            </div>
          </Tabs.TabPane>
        </Tabs>
      </div>
    </HomePage>
  );
}