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

import { useCallback, useState } from 'react';

import { PageUrl } from '@/constants/app';
import useUserInfo from '@/hooks/use-user-info';
import { navigateTo } from '@/utils/route';
import Toast from '@/utils/toast';
import { requestUserInfo, setPhoneNumber } from '@/utils/user';
import './index.less';

const PREFIX = 'partner-fragment-entry';

type JoinEntryProps = {
  onBindSuccess: () => void;
};
function JoinEntry({ onBindSuccess }: JoinEntryProps) {
  const userInfo = useUserInfo();

  const hasPhone = !!userInfo.phone;

  const handleGetPhoneNumber = useCallback(async (e: BaseEventOrig<ButtonProps.onGetPhoneNumberEventDetail>) => {
    const encryptedData = e.detail.encryptedData;
    const iv = e.detail.iv;
    if (!encryptedData || !iv) {
      return Toast.error('取消授权');
    }

    try {
      await setPhoneNumber({ encryptedData, iv });
      await requestUserInfo();
      Toast.success('绑定成功');
      onBindSuccess();
    } catch (err) {
      Toast.error('绑定失败');
    }
  }, []);
  return (
    <div className={`${PREFIX}__join`}>
      <div className={`${PREFIX}__join-title`}>
        加入播络合伙人，高达<span className="highlight">75%</span>分成
      </div>
      <div className={`${PREFIX}__join-desc`}>模式简单，分成比例高，欢迎各位群主、经纪人或机构</div>
      {hasPhone && (
        <Button className={`${PREFIX}__join-button`} onClick={onBindSuccess}>
          立即加入
        </Button>
      )}
      {!hasPhone && (
        <Button className={`${PREFIX}__join-button`} openType="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
          立即加入
        </Button>
      )}
    </div>
  );
}

function PartnerKanban() {
  const handleNavigate = useCallback(() => {
    navigateTo(PageUrl.Partner);
  }, []);
  return (
    <div className={`${PREFIX}__kanban`}>
      <Image className={`${PREFIX}__kanban-bg`} src={require('@/statics/png/partner_bg.png')} mode="scaleToFill" />
      <div className={`${PREFIX}__kanban-content`}>
        <div className={`${PREFIX}__kanban-button`} onClick={handleNavigate}>
          查看详情
          <Image
            className={`${PREFIX}__kanban-button__image`}
            mode="aspectFit"
            src={require('@/statics/svg/caret-right.svg')}
          />
        </div>
        <div className={`${PREFIX}__kanban-total`}>
          <div className={`${PREFIX}__kanban-title`}>总收益（元）</div>
          <div className={`${PREFIX}__kanban-money`}>1666.66</div>
        </div>
        <div className={`${PREFIX}__kanban-details`}>
          <div className={`${PREFIX}__kanban-details-part`}>
            <div className={`${PREFIX}__kanban-title`}>可提现（元）</div>
            <div className={`${PREFIX}__kanban-money`}>666.23</div>
          </div>
          <div className={`${PREFIX}__kanban-details-part`}>
            <div className={`${PREFIX}__kanban-title`}>提现中（元）</div>
            <div className={`${PREFIX}__kanban-money`}>666.23</div>
          </div>
          <div className={`${PREFIX}__kanban-details-part`}>
            <div className={`${PREFIX}__kanban-title`}>待分账（元）</div>
            <div className={`${PREFIX}__kanban-money`}>666.23</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function PartnerEntry() {
  const [state, setState] = useState(1);
  // TODO: 开通状态检查
  const handleBindSuccess = useCallback(() => {
    setState(0);
  }, []);

  if (state === 0) {
    return <JoinEntry onBindSuccess={handleBindSuccess} />;
  }
  return <PartnerKanban />;
}
