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

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

import JobBuy from '@/components/product-dialog/steps-ui/job-buy';
import SafeBottomPadding from '@/components/safe-bottom-padding';
import { PageUrl } from '@/constants/app';
import { GET_CONTACT_TYPE } from '@/constants/job';
import { navigateTo } from '@/utils/route';

import './index.less';

interface IProps {
  onCancel: () => void;
  onConfirm: (type: GET_CONTACT_TYPE) => void;
}

const PREFIX = 'prejob-popup';

const GET_CONTACT_TYPE_OPTIONS = [
  {
    type: GET_CONTACT_TYPE.MATERIAL,
    icon: 'https://publiccdn.neighbourhood.com.cn/img/file.svg',
    title: '创建模卡（免费报单）',
    desc: '免费报单，优先推荐给企业，机会更多',
    btnText: '创建',
  },
  {
    type: GET_CONTACT_TYPE.VIP,
    icon: 'https://publiccdn.neighbourhood.com.cn/img/diamond.svg',
    title: '播络会员',
    desc: '开通会员每天可查看10个',
    btnText: '开通',
  },
];

export function PrejobPopup({ onCancel, onConfirm }: IProps) {
  const [openPopup, setOpenPopup] = useState(true);
  const [openDialog, setOpenDialog] = useState(false);
  const handleClick = (type: GET_CONTACT_TYPE) => () => {
    if (type === GET_CONTACT_TYPE.MATERIAL) {
      navigateTo(PageUrl.MaterialUploadVideo);
      onConfirm(type);
    }
    if (type === GET_CONTACT_TYPE.VIP) {
      setOpenPopup(false);
      setOpenDialog(true);
    }
  };
  const handleAfterBuy = useCallback(async () => {
    onConfirm(GET_CONTACT_TYPE.VIP);
  }, [onConfirm]);
  return (
    <Fragment>
      <Popup rounded className={PREFIX} placement="bottom" open={openPopup} onClose={onCancel}>
        <div className={`${PREFIX}__content`}>
          <div className={`${PREFIX}__title`}>以下方式任选其一均可获取联系方式</div>
          <div className={`${PREFIX}__body`}>
            {GET_CONTACT_TYPE_OPTIONS.map(option => {
              return (
                <div className={`${PREFIX}__item`} key={option.type}>
                  <div className={`${PREFIX}__item-icon ${option.type}`}>
                    <Image mode="aspectFit" src={option.icon} />
                  </div>
                  <div className={`${PREFIX}__item-main`}>
                    <div className="title">{option.title}</div>
                    <div className="desc">{option.desc}</div>
                  </div>
                  <div className={`${PREFIX}__item-action`}>
                    <Button className={`${PREFIX}__btn`} onClick={handleClick(option.type)}>
                      {option.btnText}
                    </Button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <SafeBottomPadding />
      </Popup>
      <Dialog open={openDialog} onClose={onCancel}>
        <Dialog.Content>
          <JobBuy onConfirm={handleAfterBuy} buyOnly />
        </Dialog.Content>
      </Dialog>
    </Fragment>
  );
}