import React from 'react'
import useRequest from '@ahooksjs/use-request/es'

import { useLogin2p } from 'Login2p/Login2pContext'
import { ColumnService, IColumnDetail } from './Column.service'
import ColumnContent from './components/ColumnContent'
import ValidateEmpty from 'components/ValidateEmpty'
import { WebNotPublish } from 'components/Empty'
import useTimeCount from 'Material/hooks/useTimeCount'
import NoPermission, { INewPermissionType, ISpecialType, ITryType } from 'Material/components/NoPermission'
import { setWxShare } from 'utils/wxConfig'
import styles from './css/ColumnDetail.module.scss'
import { useMedia } from 'Context/Media/MediaContext'

import PayNoPermission from 'Material/components/PayNoPermission'

export enum ColumnHasPermissionType {
  OK = 1,
  NO = 2
}

interface IColumnDetailProps {
  articleId: number // 笔记/观点ID
}

/**笔记/观点 */
const ColumnDetail: React.FC<IColumnDetailProps> = props => {
  const login2p = useLogin2p()
  // 详情
  const {
    data,
    loading,
    refresh: refreshArcticleDetail
  } = useRequest(ColumnService.getColumnDetail, {
    defaultParams: [props.articleId, sessionStorage.getItem('invite_code') || login2p.inviteCode],
    formatResult: response => response.data.Data,
    onSuccess: res => {
      setWxShare(res.Title, '', res.ShareImg)
    }
  })
  const media = useMedia()
  useTimeCount(
    props.articleId,
    'column',
    (data?.HasPermission && data?.HasPermission === INewPermissionType.OK) || false
  )
  const handleToRefresh = () => {
    refreshArcticleDetail()
  }
  const formatRender = (data: IColumnDetail) => {
    if (data.HasPermission && data.HasPermission !== ColumnHasPermissionType.OK && !data?.IsShowWxPay) {
      return (
        <div className={styles['art-nopower-bg']}>
          {/* {data?.IsShowWxPay && !media.isSmallMax ? ( // 暂时这么写
            <PayNoPermission
              dataInfo={data as IColumnDetail}
              tryType={ITryType.YanxuanSpecial}
              border={true}
              onRefresh={handleToRefresh}
            />
          ) : ( */}
          <NoPermission
            hasPermission={data?.HasPermission}
            detailID={data.Id}
            specialType={ISpecialType.YanxuanSpecial}
            tryType={ITryType.YanxuanSpecial}
            border={true}
          />
        </div>
      )
    }
    if (login2p.userInfo?.UserId === data.UserId || data.IsApprovalAdmin || data.Status === 3) {
      return (
        <div className={`${styles['columndetail-page']}`}>
          <ColumnContent
            detail={data as IColumnDetail}
            onCollect={handleToRefresh}
            onLike={handleToRefresh}
            handleToRefresh={handleToRefresh}
          />
        </div>
      )
    }
    return (
      <div className={`${styles['columndetail-page']}`}>
        <WebNotPublish title={login2p.userInfo?.UserId !== data.UserId ? '文章暂未发布' : ''} />
      </div>
    )
  }

  return (
    <>
      <ValidateEmpty loading={loading} data={data}>
        {data && formatRender(data)}
      </ValidateEmpty>
      {data?.Status === 3 && data.HasPermission === ColumnHasPermissionType.OK && (
        <div className={`${styles['statement-wrapper']}`}>
          <strong>郑重声明：</strong>
          <p>
            察研科技研选平台（以下简称“本平台”）所载内容仅供上海察研科技有限公司（以下简称“察研科技”）正式签约客户参考使用，察研科技不因任何机构或个人登录或浏览本页面内容而将该机构或个人视为察研科技的服务对象。
          </p>
          <p>
            本平台所载信息为用户投稿、公开信息及从第三方合法取得的市场、行业及企业相关等信息，上述信息涉及的观点、陈述、判断等与察研科技立场无关，察研科技对此表述中立。察研科技并不对上述信息的准确性、真实性、可用性、安全性、完整性、正当性做出保证，您应当自行决定是否采纳并自行承担相应的责任。察研科技不对您因使用察研科技提供的任何信息做出的任何决策承担责任。
          </p>
          <p>
            本平台所载信息、意见不构成任何买卖证券、基金及其他金融工具的投资决策建议或推荐，且在任何时候均不构成对任何人具有针对性的、指导具体投资的操作意见，您应当对本平台中的信息和意见进行评估，全面认识金融市场的风险收益特征，根据自身情况自主作出决策并自行承担风险。市场有风险，投资需谨慎。
          </p>
          <p>
            未经察研科技书面许可，任何机构或个人不得以翻版、复制、发表、引用或再次分发他人等任何形式侵犯本平台发布的所有内容的版权。如因侵权行为给察研科技造成任何直接或间接的损失，察研科技保留追究一切法律责任的权利。
          </p>
        </div>
      )}
    </>
  )
}

export default ColumnDetail
