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

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

import { EventName, OpenSource, PageUrl } from '@/constants/app';
import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
import useLocation from '@/hooks/use-location';
import useUserInfo from '@/hooks/use-user-info';
import { StaffInfo } from '@/types/partner';
import { copy } from '@/utils/common';
import { getStaffInfo } from '@/utils/partner';
import { navigateTo } from '@/utils/route';
import './index.less';

const PREFIX = 'invite-operations';

export default function InviteOperations() {
  const location = useLocation();
  const userInfo = useUserInfo();
  const [cityCode, setCityCode] = useState<string>(location.cityCode);
  const [staffInfo, setStaffInfo] = useState<StaffInfo | null>(null);

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

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

  const handleCopy = useCallback(() => {
    copy(`我的ID是：${userInfo.userId}，邀你进主播群`);
  }, [userInfo.userId]);

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

  useEffect(() => {
    if (!cityCode) return;

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

  return (
    <div className={PREFIX}>
      <div className={`${PREFIX}__main`}>
        <div className={`${PREFIX}__block`}>
          <div className={`${PREFIX}__lined-wrapper`}>
            <div className={`${PREFIX}__lined-title ${PREFIX}__title`}>活动说明</div>
          </div>
          <div className={`${PREFIX}__card`}>
            <div className={`${PREFIX}__h1 center`}>邀请播络运营进带货主播群</div>
            <div className={`${PREFIX}__h1 center`} style={{ paddingBottom: `48rpx` }}>
              每邀请进一个群送一个日会员
            </div>
            <div className={`${PREFIX}__edging`}>注：只能邀请带货主播群，请勿邀请其他群</div>
          </div>
        </div>
        <div className={`${PREFIX}__block`}>
          <div className={`${PREFIX}__lined-wrapper`}>
            <div className={`${PREFIX}__lined-title ${PREFIX}__title`}>邀请方法</div>
          </div>
          <div className={`${PREFIX}__card`}>
            <div className={`${PREFIX}__body`}>
              <div className={`${PREFIX}__h1`}>
                加运营为好友并将以下信息 <div className="highlight">粘贴发送给运营</div>
              </div>
              <div className={`${PREFIX}__action-block`}>
                <div>我的ID是：{userInfo.userId}，邀你进主播群</div>
                <Button className={`${PREFIX}__copy`} onClick={handleCopy}>
                  复制
                </Button>
              </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>
        </div>
      </div>
    </div>
  );
}