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

import { Tabs } from '@taroify/core';
import { Arrow } from '@taroify/icons';
import { Fragment, useCallback, useEffect, useState } from 'react';

import GroupCertificationList from '@/components/group-certification-list';
import { EventName, OpenSource, PageUrl } from '@/constants/app';
import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
import useInviteCode from '@/hooks/use-invite-code';
import useLocation from '@/hooks/use-location';
import { StaffInfo } from '@/types/partner';
import { generateGroupAuthCode, getStaffInfo } from '@/utils/partner';
import { navigateTo } from '@/utils/route';
import { getCommonShareMessage } from '@/utils/share';
import './index.less';

const PREFIX = 'group-owner-certification';

export default function GroupOwnerCertification() {
  const location = useLocation();
  const inviteCode = useInviteCode();
  const [cityCode, setCityCode] = useState<string>();
  Taro.showShareMenu({
    withShareTicket: true,
  });
  useShareAppMessage(async () => {
    const { authCode } = await generateGroupAuthCode();
    return getCommonShareMessage({
      useCapture: false,
      title: `我在认证群主，宝子帮我点击下 ${authCode}`,
      inviteCode,
      params: { authCode },
      path: PageUrl.Job,
      imageUrl: 'https://publiccdn.neighbourhood.com.cn/img/share-group-owner-certificate.png',
    });
  });

  const handleClickCityMenu = useCallback(() => {
    navigateTo(PageUrl.CitySearch, { city: cityCode || location.cityCode, source: OpenSource.GroupOwnerCertificate });
  }, [cityCode, location.cityCode]);

  const handleCityChange = useCallback(data => {
    console.log('handleCityChange', data);
    const { openSource, cityCode: cCode } = data;
    if (openSource !== OpenSource.GroupOwnerCertificate) {
      return;
    }
    setCityCode(cCode);
  }, []);

  useEffect(() => {
    Taro.eventCenter.on(EventName.SELECT_CITY, handleCityChange);
    return () => {
      Taro.eventCenter.off(EventName.SELECT_CITY, handleCityChange);
    };
  }, [handleCityChange]);

  const [staffInfo, setStaffInfo] = useState<StaffInfo | null>(null);
  useEffect(() => {
    if (!cityCode) return;

    getStaffInfo(cityCode)
      .then(data => {
        setStaffInfo(data);
      })
      .catch(() => {
        setStaffInfo(null);
      });
  }, [cityCode]);

  return (
    <div className={PREFIX}>
      <Tabs className={`${PREFIX}__tabs`}>
        <Tabs.TabPane value={0} title="认证方法">
          <div className={`${PREFIX}__main`}>
            <div className={`${PREFIX}__block`}>
              <div className={`${PREFIX}__title`}>第一步：拉运营入群</div>
              <div className={`${PREFIX}__card`}>
                <div className={`${PREFIX}__body`}>
                  <div>拉播络城市运营进入你的带货主播群，</div>
                  <div>请确认你是群主且是带货主播群，不然不要拉</div>
                </div>
                <div className={`${PREFIX}__lined-wrapper`}>
                  <div className={`${PREFIX}__lined-title`}>选择城市，添加运营</div>
                </div>
                <div className={`${PREFIX}__city-select`} onClick={handleClickCityMenu}>
                  {cityCode ? CITY_CODE_TO_NAME_MAP.get(cityCode) : '请选择城市'}
                  <Arrow size={16} />
                </div>
                {staffInfo && (
                  <Fragment>
                    <div className={`${PREFIX}__lined-wrapper`}>
                      <div className={`${PREFIX}__lined-title`}>长按并识别二维码添加运营</div>
                    </div>
                    <Image
                      className={`${PREFIX}__qrcode`}
                      src={staffInfo.staffQrCode}
                      showMenuByLongpress
                      mode="aspectFill"
                    />
                  </Fragment>
                )}
              </div>
              <div className={`${PREFIX}__title`}>第二步</div>
              <div className={`${PREFIX}__card`}>
                <div className={`${PREFIX}__h1 ${PREFIX}__bold`}>点击以下按钮分享小程序到群，并在群里打开小程序</div>
                <div className={`${PREFIX}__body`}>
                  <div className="highlight">1次分享只能认证一个群，有多个群请分享多次，不可在微信聊天里直接转发；</div>
                  <div>一般1天内完成，超时未完成认证请重新分享或者咨询运营</div>
                </div>
                <Button className={`${PREFIX}__share`} openType="share">
                  分享小程序
                </Button>
              </div>
            </div>
          </div>
        </Tabs.TabPane>
        <Tabs.TabPane value={1} title="已认证的群">
          <GroupCertificationList />
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
}