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

import { Fragment, useCallback, useState } from 'react';

import SafeBottomPadding from '@/components/safe-bottom-padding';
import { PageUrl } from '@/constants/app';
import { logWithPrefix } from '@/utils/common';
import { claimMembershipCoupon, getCouponCodeFromQuery } from '@/utils/coupon';
import { getPageQuery, switchTab } from '@/utils/route';
import { formatTime } from '@/utils/time';
import './index.less';

const PREFIX = 'give-vip';
const log = logWithPrefix(PREFIX);

enum State {
  PENDING,
  SUCCESS,
  FAILED,
}
export default function GiveVip() {
  const [state, setState] = useState<State>(State.PENDING);
  const [expireAt, setExpireAt] = useState('');
  const [usedBefore, setUsedBefore] = useState(false);
  const handleNavigate = useCallback(() => {
    switchTab(PageUrl.Job);
  }, []);

  useLoad(() => {
    const query = getPageQuery<{ d: string }>();
    const code = getCouponCodeFromQuery(query);
    claimMembershipCoupon(code!)
      .then(res => {
        setUsedBefore(res.usedBefore);
        setExpireAt(res.usageExpireAt);
        setState(Date.now() > new Date(res.usageExpireAt).getTime() ? State.FAILED : State.SUCCESS);
      })
      .catch(err => {
        console.error(err);
        setState(State.FAILED);
      });
  });

  return (
    <div className={PREFIX}>
      {state === State.SUCCESS && (
        <Fragment>
          <div className={`${PREFIX}__title`}>
            <Image src="https://publiccdn.neighbourhood.com.cn/img/partner-yes.svg" className={`${PREFIX}__icon`} />
            <div>{usedBefore ? '宝子，你已经领过了，下周再来' : '宝子，播络会员领取成功'}</div>
          </div>
          <div className={`${PREFIX}__coupon-info`}>
            <Image src="https://publiccdn.neighbourhood.com.cn/img/parnet-share-bg.png" className={`${PREFIX}__bg`} />
            <div className={`${PREFIX}__coupon-title`}>播络日会员</div>
            <div className={`${PREFIX}__coupon-intro`}>
              会员有效期内可增加<div className="highlight">10次</div>报单机会
            </div>
            <div className={`${PREFIX}__coupon-valid`}>
              有效期至：{formatTime(expireAt, 'YYYY/MM/DD HH:mm:ss', false)}
            </div>
          </div>
        </Fragment>
      )}
      {state === State.FAILED && (
        <Fragment>
          <div className={`${PREFIX}__hint`}>
            <Image
              src="https://publiccdn.neighbourhood.com.cn/img/link-invalid.svg"
              mode="aspectFit"
              className={`${PREFIX}__icon`}
            />
            <div className={`${PREFIX}__hint-title`}>宝子，链接已失效</div>
          </div>
          <div className={`${PREFIX}__title`}>
            请联系分享人<div className="highlight">再次分享</div>
          </div>
        </Fragment>
      )}
      <div className={`${PREFIX}__info-block`}>
        <div className={`${PREFIX}__info-title`}>播络简介</div>
        <div className={`${PREFIX}__info-card`}>
          <div className={`${PREFIX}__info-body`}>
            播络通告整理汇集了本地每日新增带货主播通告，方便大家及时找到高薪工作
          </div>
          <Image
            className={`${PREFIX}__info-img`}
            src="https://publiccdn.neighbourhood.com.cn/img/partner-share-coupon-img.png"
            mode="heightFix"
          />
        </div>
      </div>
      <div className={`${PREFIX}__footer`}>
        <div className={`${PREFIX}__footer-body`}>
          <Button className={`${PREFIX}__button`} onClick={handleNavigate}>
            立即使用
          </Button>
        </div>
        <SafeBottomPadding />
      </div>
    </div>
  );
}