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

import { Cell, Dialog } from '@taroify/core';
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';

import PageLoading from '@/components/page-loading';
import { PublishJobQrCodeDialog } from '@/components/product-dialog/publish-job';
import CompanyPublishJobBuy from '@/components/product-dialog/steps-ui/company-publish-job-buy';
import SafeBottomPadding from '@/components/safe-bottom-padding';
import { ISelectOption, PopupSelect } from '@/components/select';
import { PageUrl } from '@/constants/app';
import { JobManageStatus } from '@/constants/job';
import { OrderStatus, OrderType, ProductType } from '@/constants/product';
import useCityOperators from '@/hooks/use-city-operators';
import { usePublishJob } from '@/hooks/use-publish-job';
import { CityConfigListItem } from '@/types/location';
import { logWithPrefix } from '@/utils/common';
import { requestJobDetail } from '@/utils/job';
import {
  getOrderPrice,
  isCancelPay,
  requestAllBuyProduct,
  requestCreatePayInfo,
  requestOrderInfo,
  requestPayment,
} from '@/utils/product';
import { navigateTo } from '@/utils/route';
import Toast from '@/utils/toast';
import './index.less';

interface CityOption extends ISelectOption<CityConfigListItem> {
  value: CityConfigListItem;
}

const PREFIX = 'user-batch-publish';
const log = logWithPrefix(PREFIX);

export default function UserBatchPublish({ cityCode, jobId }: { cityCode?: string; jobId?: string }) {
  const [loading, setLoading] = useState(true);
  const [showQrCode, setShowQrCode] = useState(false);
  const [selectable, setSelectable] = useState(false);
  const [showCitySelect, setShowCitySelect] = useState(false);
  const [city, setCity] = useState<CityConfigListItem | null>(null);
  const [showPublishJob, setShowPublishJob] = useState(false);

  const cityOperators = useCityOperators();

  const availableCities = useMemo(() => cityOperators.filter(c => c.sendCount), [cityOperators]);
  const cityOptions: CityOption[] = useMemo(
    () => availableCities.map(value => ({ value, label: value.cityName })),
    [availableCities]
  );

  const [showBuy, setShowBuy, handlePublishJob] = usePublishJob(jobId);
  const handleClickCity = useCallback(() => setShowCitySelect(true), []);

  const handleSelectCity = useCallback(value => {
    setCity(value);
    setShowCitySelect(false);
  }, []);
  const handleClickViewGroup = useCallback(() => navigateTo(PageUrl.GroupList, { city: city?.cityCode }), [city]);

  const handleClickBuy = useCallback(async () => {
    // if (1 < 2) {
    //   await new Promise(r => setTimeout(r, 3000));
    //   setShowQrCode(true);
    //   return;
    // }
    if (!city || !city.payPrice || !city.showPrice || !city.sendCount || !city.productSpecId) {
      return;
    }
    try {
      Taro.showLoading();
      const allowBuy = await requestAllBuyProduct(ProductType.GroupBatchPublish);
      if (!allowBuy) {
        Taro.hideLoading();
        Toast.info('您最近已购买过，可直接联系客服');
        setShowQrCode(true);
        return;
      }

      if (jobId && cityCode) {
        const jobDetail = await requestJobDetail(jobId);

        if (jobDetail.status !== JobManageStatus.Open) {
          Taro.hideLoading();
          setShowPublishJob(true);
          return;
        }
      }

      const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
        type: OrderType.GroupBatchPublish,
        amt: city.payPrice,
        // amt: 1,
        productCode: ProductType.GroupBatchPublish,
        productSpecId: city.productSpecId,
      });
      log('handleBuy payInfo', payOrderNo, createPayInfo);
      await requestPayment({
        timeStamp: createPayInfo.timeStamp,
        nonceStr: createPayInfo.nonceStr,
        package: createPayInfo.packageVal,
        signType: createPayInfo.signType,
        paySign: createPayInfo.paySign,
      });
      const { status } = await requestOrderInfo({ payOrderNo });
      log('handleBuy orderInfo', status);
      if (status !== OrderStatus.Success) {
        throw new Error('order status error');
      }
      Taro.hideLoading();
      setShowQrCode(true);
    } catch (e) {
      Taro.hideLoading();
      Toast.error(isCancelPay(e) ? '取消购买' : '购买失败请重试');
      log('handleBuy error', e);
    }
  }, [cityCode, jobId, city]);

  useEffect(() => {
    if (!availableCities.length) {
      return;
    }
    try {
      const initCity = cityCode ? availableCities.find(o => o.cityCode === cityCode) : availableCities[0];

      setSelectable(!cityCode);

      setLoading(false);
      if (initCity) {
        setCity(initCity);
      } else {
        Toast.info('当前城市不支持代发');
      }
    } catch (e) {
      Toast.error('加载失败请重试');
    }
  }, [availableCities, cityCode]);

  if (loading) {
    return <PageLoading />;
  }

  return (
    <div className={PREFIX}>
      {/*<Image mode="widthFix" className={`${PREFIX}__header-image`} src="https://neighbourhood.cn/pubJob.png" />*/}
      <div className={`${PREFIX}__title`}>服务说明</div>
      <div className={`${PREFIX}__illustrate`}>
        服务方式：帮您把招聘需求<div className="underline">发到本地主播群，投递量大幅增加</div>
      </div>
      {selectable ? (
        <Fragment>
          <div className={`${PREFIX}__title`}>请选择城市</div>
          <Cell isLink align="center" className={`${PREFIX}__cell`} title={city?.cityName} onClick={handleClickCity} />
        </Fragment>
      ) : (
        <Fragment>
          <div className={`${PREFIX}__title`}>当前通告城市</div>
          <Cell align="center" className={`${PREFIX}__cell`} title={city ? city.cityName : '暂不支持代发'} />
        </Fragment>
      )}

      {city && (
        <Fragment>
          <div className={`${PREFIX}__extra`} onClick={handleClickViewGroup}>
            查看该城市合作群列表
          </div>
          <div className={`${PREFIX}__title`}>可购买群数</div>
          <Cell align="center" className={`${PREFIX}__cell`} title={city?.sendCount} />
          <div className={`${PREFIX}__title`}>服务费用</div>
          <div className={`${PREFIX}__cost-describe`}>
            <div className={`${PREFIX}__cost-describe__price`}>{`${city?.showPrice}元`}</div>
            <div
              className={`${PREFIX}__cost-describe__original_price`}
            >{`原价：${city?.originalPrice || city?.sendCount}元`}</div>
          </div>

          <Button className={`${PREFIX}__buy-button`} onClick={handleClickBuy}>
            立即购买
          </Button>
        </Fragment>
      )}
      <SafeBottomPadding />
      <div>
        <PopupSelect
          value={city}
          options={cityOptions}
          open={showCitySelect}
          onSelect={handleSelectCity}
          onClose={() => setShowCitySelect(false)}
        />
        <PublishJobQrCodeDialog onClose={() => setShowQrCode(false)} open={showQrCode} />
        <Dialog open={showBuy} onClose={() => setShowBuy(false)}>
          <Dialog.Content>
            <CompanyPublishJobBuy onNext={handlePublishJob} />
          </Dialog.Content>
        </Dialog>
        <Dialog open={showPublishJob} onClose={() => setShowPublishJob(false)}>
          <Dialog.Content>
            <div className={`${PREFIX}__publish-title`}>请先发布通告</div>
            <Button className={`${PREFIX}__publish-button`} onClick={handlePublishJob}>
              发布该通告
            </Button>
          </Dialog.Content>
        </Dialog>
      </div>
    </div>
  );
}