import React, { useEffect } from 'react'
import { Link } from 'react-router-dom'
import useRequest from '@ahooksjs/use-request'
import { useHistory } from 'react-router-dom'
import dayjs from 'dayjs'

import { Affix, Breadcrumb, Col, Divider, Row, Timeline, Typography, Watermark } from 'antd'

import { VmpSeverError } from 'components/Empty'
import { MaterialService, IArcticleInfo, IArcticleHotListItem } from '../Material.service'
import { useMedia } from 'Context/Media/MediaContext'
import { useLogin2p } from 'Login2p/Login2pContext'
import styles from '../css/MaterialInfo.module.scss'
import NButton from 'components/NButton/NButton'
import PayNoPermission from './PayNoPermission'
import { ITryType, INewPermissionType } from './NoPermission'
type ResearchContainerProps = {
  info: IArcticleInfo
  handleToRefresh?: () => void
}

const ResearchContainer: React.FC<ResearchContainerProps> = props => {
  const { info, handleToRefresh } = props
  // const [showDisclaimers, setShowDisclaimers] = useState(false)

  const { data: hotList, run } = useRequest(MaterialService.getArcticleHotList, {
    manual: true,
    formatResult: response => response.data.Data?.List
  })
  const media = useMedia()
  const login2p = useLogin2p()
  const history = useHistory()

  const inlineStyleConfig = {
    titleLevel: media.isSmallMax ? 4 : 2
  }

  useEffect(() => {
    run(info.Detail.ArticleId)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const handleToAuthorDetail = (ID: number) => {
    if (!ID) return
    window.open(`/community/author/${ID}`)
  }
  // 查看更多
  const handleToShowMore = () => {
    if (!login2p.jwt) {
      history.push(`/login2p?next=${encodeURIComponent(window.location.pathname + window.location.search)}`)
      return
    }
  }

  const handleOpenToPage = (path: string) => {
    window.open(path)
  }
  return info ? (
    <div className={styles['research-container']}>
      <div className="reserch-breadcrumb">
        <Breadcrumb style={{ margin: '12px 0' }}>
          <Breadcrumb.Item>
            <Link to={`/${login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''}`}>首页</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>买方研选</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <Row gutter={24} style={{ marginLeft: 0, marginRight: 0 }}>
        <Col
          xs={{ span: 24, offset: 0 }}
          sm={{ span: 24, offset: 0 }}
          md={{ span: 16, offset: 1 }}
          lg={{ span: 15, offset: 2 }}
          xl={{ span: 15, offset: 2 }}
          className="padding-b-lg"
        >
          <Typography className={styles['no-copy']}>
            <Typography.Title level={inlineStyleConfig.titleLevel as 1 | 2 | 4 | 5 | 3 | undefined}>
              {info.Detail.Title}
            </Typography.Title>
          </Typography>
          <div className="auther-wrapper">
            {(info.Detail?.DepartmentImgUrl || info.Detail?.DepartmentDetail?.ImgUrl) && (
              <img
                src={info.Detail?.DepartmentImgUrl || info.Detail?.DepartmentDetail?.ImgUrl}
                alt="头像"
                className="auther-img com-cursor-p"
                onClick={handleToAuthorDetail.bind(this, info.Detail?.DepartmentId)}
              />
            )}
            <div>
              <div onClick={handleToAuthorDetail.bind(this, info.Detail?.DepartmentId)} className="com-cursor-p">
                {info.Detail?.NickName || info.Detail?.DepartmentDetail?.NickName}
              </div>
              <div className="gray-text fz12">{dayjs(info.Detail.PublishDate).format('YYYY-MM-DD HH:mm')}</div>
            </div>
          </div>
          <Row gutter={24}>
            <Col
              xs={{ span: 24, offset: 0 }}
              sm={{ span: 24, offset: 0 }}
              md={{ span: 23, offset: 1 }}
              lg={{ span: 21, offset: 3 }}
              xl={{ span: 21, offset: 3 }}
            >
              <div className="abstract-wrapper">
                {info.Detail.Abstract?.replace('<p><br></p>', '') ? (
                  <>
                    <Typography.Paragraph>
                      <Typography.Text style={{ fontSize: 20 }} italic strong>
                        摘要：
                      </Typography.Text>
                    </Typography.Paragraph>
                    <Typography.Paragraph>
                      <div dangerouslySetInnerHTML={{ __html: info.Detail.Abstract }} />
                    </Typography.Paragraph>
                  </>
                ) : (
                  <></>
                )}
                {
                  // annotation 可能能null
                  info.Detail.Annotation?.replace('<p><br></p>', '') ? (
                    <>
                      <Typography.Paragraph>
                        <Typography.Text style={{ fontSize: 20 }} italic strong>
                          核心观点：
                        </Typography.Text>
                      </Typography.Paragraph>
                      <Typography.Paragraph>
                        <div dangerouslySetInnerHTML={{ __html: info.Detail?.Annotation }} />
                      </Typography.Paragraph>
                    </>
                  ) : (
                    <></>
                  )
                }
              </div>
              {(info.Detail.Abstract || info.Detail?.Annotation) && <Divider />}
              <Watermark
                content={login2p.userInfo ? login2p.userInfo?.UserName : '水印'}
                font={{ fontSize: 22, color: 'rgba(0,0,0,.08)' }}
              >
                <div
                  dangerouslySetInnerHTML={{ __html: info.Detail.Body }}
                  className={`acticle-content ${!login2p.jwt ? 'line-four' : ''}`}
                />
              </Watermark>
              {info?.IsShowWxPay &&
                info?.HasPermission !== INewPermissionType.OK && ( // 暂时这么写
                  <PayNoPermission
                    dataInfo={info as IArcticleInfo}
                    tryType={ITryType.Article}
                    border={false}
                    onRefresh={handleToRefresh}
                  />
                )}
              {!login2p.jwt && (
                <NButton type="primary" onClick={handleToShowMore} size="big-large" className="m-center">
                  请登录后查看更多内容
                </NButton>
              )}
            </Col>
          </Row>
        </Col>
        {!!hotList?.length && info?.HasPermission === INewPermissionType.OK && (
          <Col
            xs={{ span: 0, offset: 0 }}
            sm={{ span: 0, offset: 0 }}
            md={{ span: 4, offset: 1 }}
            lg={{ span: 4, offset: 1 }}
            xl={{ span: 4, offset: 1 }}
          >
            <Affix offsetTop={90}>
              <Timeline>
                <Timeline.Item color="red">
                  {media.isSmallMax ? (
                    <h4 style={{ color: '#b40008' }}>相关热门收藏</h4>
                  ) : (
                    <h3 style={{ color: '#b40008' }}>相关热门收藏</h3>
                  )}
                </Timeline.Item>
                {hotList?.map((item: IArcticleHotListItem) => {
                  return (
                    <Timeline.Item key={item.ArticleId} color="grey">
                      <p className="hotlist-time">{dayjs(item.PublishDate).format('YYYY-MM-DD')}</p>
                      <p>
                        <span
                          onClick={handleOpenToPage.bind(this, `/material/info/${item.ArticleId}`)}
                          className="hotlist-link"
                        >
                          {item.Title}
                        </span>
                      </p>
                    </Timeline.Item>
                  )
                })}
              </Timeline>
            </Affix>
          </Col>
        )}
      </Row>
    </div>
  ) : (
    <VmpSeverError />
  )
}

export default ResearchContainer
