import React, { useState } from 'react'
import useRequest from '@ahooksjs/use-request/es'
import { useHistory } from 'react-router-dom'

import { Col, Row, Tag, Modal, Popover, Spin } from 'antd'
import { InfoCircleOutlined } from '@ant-design/icons'

import { ReactComponent as CityImg } from 'assets/city.svg'

import NoPermission, { INewPermissionType, ISpecialType, ITryType } from 'Material/components/NoPermission'
import { useLogin2p } from 'Login2p/Login2pContext'
import ResearchActivity from 'Community/components/ResearchActivity'
import NButton from 'components/NButton/NButton'
import ActivityBtnComponent from './components/ActivityBtn.component'
import { ActivityService } from './Activity.service'
import { setWxShare } from 'utils/wxConfig'
import styles from './css/ActivityTypeDetail.module.scss'

export interface IActivitySpecialInfo {
  activityID: number
}
/**活动详情页 */
const ActivitySpecialInfo: React.FC<IActivitySpecialInfo> = props => {
  const { activityID } = props
  const login2p = useLogin2p()
  const history = useHistory()

  const [isFollow, setIsFollow] = useState<boolean>(false)

  // 活动详情
  const {
    data,
    loading: activityInfoLoading,
    refresh
  } = useRequest(ActivityService.getActivitySpecialDetail, {
    defaultParams: [activityID],
    formatResult: response => response.data.Data,
    onSuccess: res => {
      res?.Detail &&
        setWxShare(
          res?.Detail.ResearchTheme,
          res?.Detail.ActivityTimeTextByDay || res?.Detail.ActivityTimeText,
          res?.Detail.ShareImg
        )
      res && setIsFollow(res.IsFollow)
    }
  })
  const { run: applyActivityFollow } = useRequest(ActivityService.postActivityFollow, {
    manual: true,
    formatResult: response => response.data,
    onSuccess: res => {
      res.Data.Status === 1 &&
        Modal.success({
          title: '提示',
          content: (
            <div>
              <p>您已开启【专项调研】新活动通知</p>
              <p>请关注【查研观向小助手】公众号，及时获取微信消息提醒</p>
            </div>
          ),
          okText: '知道了',
          centered: true
        })
      res.Success && setIsFollow(!isFollow)
    }
  })

  const handleChangeFollow = () => {
    isFollow
      ? Modal.confirm({
          title: '提示',
          content: '您要取消【专项调研】新活动通知吗？',
          okText: '是',
          cancelText: '否',
          centered: true,
          closable: true,
          onOk: () => {
            applyActivityFollow()
          }
        })
      : applyActivityFollow()
  }
  // 登录报名
  const handleToShowMore = () => {
    if (!login2p.jwt) {
      history.push(`/login2p?next=${encodeURIComponent(window.location.pathname + window.location.search)}`)
      return
    }
  }
  return (
    <div className={styles['activity-detail-page']}>
      <Spin spinning={activityInfoLoading}>
        <Row className="m-t-lg">
          <Col
            xs={{ span: 24, offset: 0 }}
            sm={{ span: 24, offset: 0 }}
            md={{ span: 24, offset: 0 }}
            lg={{ span: 20, offset: 2 }}
            xl={{ span: 20, offset: 2 }}
          >
            <Row wrap={false} gutter={24}>
              <Col flex={1} className="m-b-sm">
                {data?.Detail ? (
                  <div className="activity-detail-content">
                    <div className="activity-tips-line">
                      预报名专项调研行程持续更新中，满10家即开团，欢迎点击感兴趣预报名
                      <div className="new-message" onClick={handleChangeFollow}>
                        {isFollow ? '取消通知' : '新活动通知'}
                      </div>
                    </div>
                    <div className="activity-detail-title">
                      <span className="com-fz18">{data?.Detail.ResearchTheme}</span>
                    </div>
                    <div className="activity-detail-list">
                      <div className="activity-detail-line">
                        <span className="activity-detail-label">活动类型：</span>
                        <span className="g-va-middle no-wrap">{data?.Detail.ActivityTypeName}</span>
                        <Tag color="blue" className="spec-tag-ml">
                          {data?.Detail.TripStatus === 1 ? '预报名' : '确定行程'}
                        </Tag>
                        {data?.Detail.Explain && (
                          <div onClick={e => e.stopPropagation()} className="m-l-md">
                            <Popover
                              content={<div className={styles['special-tips-wrapper']}>{data?.Detail.Explain}</div>}
                              trigger="click"
                            >
                              <InfoCircleOutlined style={{ fontSize: 16 }} />
                            </Popover>
                          </div>
                        )}
                        {data?.Detail.City && (
                          <div className="city-wrapper g-va-middle">
                            <CityImg fill="#faa12f" className="city-img" />
                            <span className="g-va-middle">{data?.Detail.City}</span>
                          </div>
                        )}
                      </div>
                      <div className="activity-detail-line">
                        <span className="activity-detail-label">所属行业：</span>
                        {data?.Detail.ChartPermissionName}
                      </div>
                      {data?.Detail.TripStatus === 1 && data?.Detail.ActivityTimeText && (
                        <div className="activity-detail-line">
                          <span className="activity-detail-label">预期时间：</span>
                          {data?.Detail.ActivityTimeText}
                        </div>
                      )}

                      {data?.Detail.TripStatus === 2 && data?.Detail.ActivityTimeTextByDay && (
                        <div className="activity-detail-line">
                          <span className="activity-detail-label">开始时间：</span>
                          {data?.Detail.ActivityTimeTextByDay}
                        </div>
                      )}
                      {data?.Detail.SpecialType && (
                        <div className="activity-detail-line">
                          <span className="activity-detail-label">调研形式：</span>
                          {data?.Detail.SpecialType === 1 ? '线上' : '线下'}
                        </div>
                      )}
                      {data?.Detail.IndustrialName || data?.Detail.IndustrialSubjectName ? (
                        <>
                          {data?.Detail.IndustrialName && (
                            <div className="activity-detail-line">
                              <span className="activity-detail-label">产业名称：</span>
                              {data?.Detail.IndustrialName}
                            </div>
                          )}

                          {data?.Detail.IndustrialSubjectName && (
                            <div className="activity-detail-line">
                              <span className="activity-detail-label">相关公司：</span>
                              {data?.Detail.IndustrialSubjectName}
                            </div>
                          )}
                        </>
                      ) : (
                        <>
                          {data?.Detail.Label && (
                            <div className="activity-detail-line">
                              <span className="activity-detail-label">相关主题：</span>
                              {data?.Detail.Label}
                            </div>
                          )}
                        </>
                      )}
                      {data?.Detail.ReportLink && (
                        <div className="activity-detail-line">
                          <span className="activity-detail-label">相关报告：</span>
                          <a href={data?.Detail.ReportLink}>{data?.Detail.ReportLink}</a>
                        </div>
                      )}
                    </div>
                    {login2p.jwt && data.HasPermission === INewPermissionType.OK && data?.Detail && (
                      <div className="detail-btn-wrapper">
                        <ActivityBtnComponent
                          item={data?.Detail}
                          btnGrous="detail"
                          isSpecial={true}
                          onChangeSomething={refresh}
                        />
                      </div>
                    )}
                    {!login2p.jwt && (
                      <div className="detail-btn-wrapper">
                        <NButton type="primary" onClick={handleToShowMore} size="login-large" className="m-center">
                          请登录后报名
                        </NButton>
                      </div>
                    )}
                  </div>
                ) : null}
                {!activityInfoLoading && login2p.jwt && data?.HasPermission !== INewPermissionType.OK ? (
                  <NoPermission
                    hasPermission={data?.HasPermission}
                    detailID={activityID}
                    specialType={ISpecialType.SpecialActivity}
                    tryType={ITryType.Activity}
                    border={true}
                  />
                ) : null}
              </Col>
              <Col flex={'542px'} xs={0} sm={0} md={0} lg={0} xl={24} xxl={24}>
                <ResearchActivity />
              </Col>
            </Row>
          </Col>
        </Row>
      </Spin>
    </div>
  )
}

export default ActivitySpecialInfo
