import React from 'react'

import { Tooltip } from 'antd'
import { InfoCircleOutlined } from '@ant-design/icons'

import { ReactComponent as CityImg } from 'assets/city.svg'
import CheckImg from 'assets/check.png'
import PrepareImg from 'assets/prepare.png'

import { IActivitySpecialListItem } from 'Activity/Activity.service'
import ActivityBtnComponent, { IStateStringType } from './ActivityBtn.component'
import { INewestItem } from 'Newest/Newest.service'
import { IMyActivityItem } from 'Personal/Personal.service'
import styles from '../css/ActivityCard.module.scss'

export interface IActivitySpecialCard {
  item: IActivitySpecialListItem | INewestItem | IMyActivityItem
  hasBtn?: boolean // 右下角的按钮
  hasBorder?: boolean // 边框
  className?: string // 自定义样式
  selfChange?: boolean
  btnOtherLine?: boolean // 按钮是否另起一行
  btnClass?: 'act-btn-sm'
  showType?: 'primary' | 'newest' // 卡片显示的样式，默认primary，最新页上的为newest
  title?: string // 标红的标题
  btnGrous?: 'smcard' | 'detail' | 'bigcard' // smcard-如首页的小卡片，detail-如活动详情页，bigcard-如列表的大卡片
  onChangeSomething?: (activityId?: number) => void // 子组件变更后的操作
}
/**专项产业调研卡片组件 */
const ActivitySpecialCard: React.FC<IActivitySpecialCard> = props => {
  const {
    item,
    hasBtn = false,
    hasBorder = true,
    className,
    selfChange = false,
    btnOtherLine = false,
    btnClass,
    showType = 'primary',
    title,
    btnGrous,
    onChangeSomething
  } = props

  const handleToDetail = (ID: number) => {
    window.open(`${window.location.origin}/activity/info/${ID}`)
  }
  const stateString = [
    { state: IStateStringType.Waitting, name: '未开始', className: 'waitting-div' },
    { state: IStateStringType.Going, name: '进行中', className: 'going-div' },
    { state: IStateStringType.End, name: '已结束', className: 'end-div' }
  ]
  const formatState = (state: string, type: 'name' | 'class') => {
    const findItem = stateString.find(item => item.state === state)
    return type === 'name' ? findItem?.name : findItem?.className
  }
  if (!item) return null
  return (
    <>
      {showType === 'primary' && (
        <div
          className={`${styles['one-act-wrapper']} ${className}`}
          style={{ border: hasBorder ? '1px solid #EBEBEB' : 'none' }}
          onClick={handleToDetail.bind(
            this,
            (item as IActivitySpecialListItem).ActivityId || (item as INewestItem).SourceId
          )}
        >
          <div className="one-act-title g-flex g-flex-between g-flex-v-center">
            <div className="g-flex g-flex-v-center">
              {(item as IActivitySpecialListItem).SpecialType === 1 || item.ActivityType === 1 ? (
                <div className="online-underline online-btn no-wrap">线上</div>
              ) : (
                <div className="online-underline underline-btn no-wrap">线下</div>
              )}
              {item.City && (
                <div className="spec-city">
                  <CityImg fill="#3385FF" className="city-icon" />
                  <span>{item.City}</span>
                </div>
              )}
            </div>
            {(item as IActivitySpecialListItem).Explain && (
              <div onClick={e => e.stopPropagation()}>
                <Tooltip
                  placement="top"
                  title={
                    <div className={styles['special-tips-wrapper']}>{(item as IActivitySpecialListItem).Explain}</div>
                  }
                >
                  <InfoCircleOutlined className="special-tips-icon" />
                </Tooltip>
              </div>
            )}
            <div className="special-flag-wrapper">
              <img
                src={(item as IActivitySpecialListItem).TripStatus === 1 ? PrepareImg : CheckImg}
                alt=""
                className="spec-flag-img"
              />
            </div>
          </div>
          <div className="one-act-content g-flex">
            <div className="content-img-wrapper">
              <div className={`t-l-flag ${formatState(item.ActiveState, 'class')}`}>
                {formatState(item.ActiveState, 'name')}
              </div>
              <img src={item.ImgUrl} alt="背景" className="act-bg-img" />
            </div>
            <div className="content-right-wrapper">
              <div className="r-title">
                {(item as IActivitySpecialListItem)?.ResearchTheme ||
                  (item as INewestItem)?.Title ||
                  (item as IMyActivityItem)?.ActivityName}
              </div>
              <div>
                {(item as IActivitySpecialListItem).TripStatus === 1 ? '预期时间' : '开始时间'}：
                {(item as IActivitySpecialListItem).TripStatus === 1
                  ? item.ActivityTimeText
                  : (item as IActivitySpecialListItem).ActivityTimeTextByDay || item.ActivityTimeText}
              </div>
              {!btnOtherLine && hasBtn && (
                <div className="r-btn-wrapper" onClick={e => e.stopPropagation()}>
                  <ActivityBtnComponent
                    item={item}
                    isSpecial={true}
                    onChangeSomething={onChangeSomething}
                    selfChange={selfChange}
                    btnClass={btnClass}
                  />
                </div>
              )}
            </div>
          </div>
          {btnOtherLine && hasBtn && (
            <div className="r-btn-wrapper" onClick={e => e.stopPropagation()}>
              <ActivityBtnComponent
                item={item}
                isSpecial={true}
                onChangeSomething={onChangeSomething}
                selfChange={selfChange}
                btnClass={btnClass}
              />
            </div>
          )}
        </div>
      )}
      {showType === 'newest' && (
        <div
          className={`${styles['one-act-wrapper']} ${styles['newest-activity-wrapper']} ${className}`}
          style={{ border: hasBorder ? '1px solid #EBEBEB' : 'none' }}
          onClick={handleToDetail.bind(
            this,
            (item as IActivitySpecialListItem).ActivityId || (item as INewestItem).SourceId
          )}
        >
          <div className="newest-activity-title">
            <div
              className="r-title"
              dangerouslySetInnerHTML={{
                __html:
                  title ||
                  (item as IActivitySpecialListItem)?.ResearchTheme ||
                  (item as INewestItem)?.Title ||
                  (item as IMyActivityItem)?.ActivityName
              }}
            />
          </div>
          <div className="one-act-content g-flex">
            <div className="content-img-wrapper">
              <div className={`t-l-flag ${formatState(item.ActiveState, 'class')}`}>
                {formatState(item.ActiveState, 'name')}
              </div>
              <img src={item.ImgUrl} alt="背景" className="act-bg-img" />
            </div>
            <div className="content-right-wrapper">
              <div className="m-b-sm g-flex g-flex-v-center">
                {(item as IActivitySpecialListItem).SpecialType === 1 || item.ActivityType === 1 ? (
                  <div className="online-underline online-btn no-wrap">线上</div>
                ) : (
                  <div className="online-underline underline-btn no-wrap">线下</div>
                )}
                {item.City && (
                  <div className="spec-city">
                    <CityImg fill="#3385FF" className="city-icon" />
                    <span>{item.City}</span>
                  </div>
                )}
                {/* {(item as IActivitySpecialListItem).Explain && (
                  <div onClick={e => e.stopPropagation()}>
                    <Tooltip
                      placement="top"
                      title={
                        <div className={styles['special-tips-wrapper']}>
                          {(item as IActivitySpecialListItem).Explain}
                        </div>
                      }
                    >
                      <InfoCircleOutlined className="special-tips-icon" />
                    </Tooltip>
                  </div>
                )} */}
                <div className="newest-flag-wrapper ">
                  <img
                    src={(item as IActivitySpecialListItem).TripStatus === 1 ? PrepareImg : CheckImg}
                    alt=""
                    className="spec-flag-img"
                  />
                </div>
              </div>
              <div>
                {(item as IActivitySpecialListItem).TripStatus === 1 ? '预期时间' : '开始时间'}：
                {(item as IActivitySpecialListItem).TripStatus === 1
                  ? item.ActivityTimeText
                  : (item as IActivitySpecialListItem).ActivityTimeTextByDay || item.ActivityTimeText}
              </div>
              {!btnOtherLine && hasBtn && (
                <div className="r-btn-wrapper" onClick={e => e.stopPropagation()}>
                  <ActivityBtnComponent
                    item={item}
                    isSpecial={true}
                    onChangeSomething={onChangeSomething}
                    selfChange={selfChange}
                    btnClass={btnClass}
                    btnGrous={btnGrous}
                  />
                </div>
              )}
            </div>
          </div>
          {btnOtherLine && hasBtn && (
            <div className="r-btn-wrapper" onClick={e => e.stopPropagation()}>
              <ActivityBtnComponent
                item={item}
                isSpecial={true}
                onChangeSomething={onChangeSomething}
                selfChange={selfChange}
                btnClass={btnClass}
                btnGrous={btnGrous}
              />
            </div>
          )}
        </div>
      )}
    </>
  )
}

export default ActivitySpecialCard
