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

import { Cell } from '@taroify/core';
import classNames from 'classnames';
import { useCallback } from 'react';

import { PageUrl } from '@/constants/app';
import { CertificationStatusType } from '@/constants/company';
import useUserInfo from '@/hooks/use-user-info';
import { navigateTo } from '@/utils/route';

import './index.less';

interface IProps {
  className?: string;
}

interface IIconProps {
  status: CertificationStatusType;
  className?: string;
  small?: boolean;
}

const PREFIX = 'certification-status';
const ICON_PREFIX = 'certification-status-icon';
const getStatusClassName = (status: CertificationStatusType) => {
  switch (status) {
    case CertificationStatusType.None:
      return 'none';
    case CertificationStatusType.Success:
      return 'success';
    case CertificationStatusType.Fail:
      return 'fail';
    default:
      return '';
  }
};
const getStatusIconUrl = (status: CertificationStatusType) => {
  switch (status) {
    case CertificationStatusType.None:
      return require('@/statics/svg/certification-status-none.svg');
    case CertificationStatusType.Success:
      return require('@/statics/svg/certification-status-success.svg');
    case CertificationStatusType.Fail:
      return require('@/statics/svg/certification-status-fail.svg');
    default:
      return;
  }
};
const getStatusDescribe = (status: CertificationStatusType) => {
  switch (status) {
    case CertificationStatusType.None:
      return '未认证';
    case CertificationStatusType.Success:
      return '实人认证';
    case CertificationStatusType.Fail:
      return '认证失败';
    default:
      return;
  }
};
const getRightText = (status: CertificationStatusType) => {
  switch (status) {
    case CertificationStatusType.None:
      return '去认证';
    case CertificationStatusType.Fail:
      return '重新认证';
    default:
      return;
  }
};

export function CertificationStatusIcon(props: IIconProps) {
  const { status, className, small = false } = props;
  return (
    <div className={classNames(ICON_PREFIX, className, { [getStatusClassName(status)]: true, small })}>
      <Image mode="aspectFit" className={`${ICON_PREFIX}__icon`} src={getStatusIconUrl(status)} />
      <div className={`${ICON_PREFIX}__describe`}>{getStatusDescribe(status)}</div>
    </div>
  );
}

function CertificationStatus(props: IProps) {
  const { className } = props;
  const { bossAuthStatus: status = CertificationStatusType.None } = useUserInfo();

  const handleClick = useCallback(() => {
    if (status !== CertificationStatusType.Success) {
      navigateTo(PageUrl.CertificationStart);
    }
  }, [status]);

  return (
    <Cell
      align="center"
      title="认证状态"
      className={classNames(PREFIX, className)}
      isLink={status !== CertificationStatusType.Success}
      onClick={handleClick}
    >
      <div className={`${PREFIX}__content`}>
        <CertificationStatusIcon status={status} />
        <div className={`${PREFIX}__right-text`}>{getRightText(status)}</div>
      </div>
    </Cell>
  );
}

export default CertificationStatus;
