import * as React from 'react'
import { createPortal } from 'react-dom'

import { Image } from '../image'

import { addInvite } from '../actions' 
import { lock, unlock } from '../../utils/body-scroll-lock'

import { ColDetail } from '../type'

import {
  Container,
  PanelContainer,
  PanelContentContainer,
  Header,
  HeaderHandle,
  Title,
  ListContainer,
  ListItem,
  FixedButton
} from './index.style'

interface Props {
  show: boolean;
  close: () => any;
  data?: OwnColDetail[];
  refresh?: () => void;
  activityId: string;
}

export interface OwnColDetail extends ColDetail {
  // 展示状态，1：正常，2：已发布，3：已满员
  showStatus: 1 | 2 | 3;
}

export interface State {
  panelShow: boolean;
  canSubmit: boolean;
  checkedColItem: number | undefined;
  aniType: 'unfold' | 'fold' | ''
}

export class CollectionPanel extends React.Component<Props, State> {

  state: State = {
    canSubmit: false,
    checkedColItem: undefined,
    aniType: '',
    panelShow: false
  }

  modalContent: HTMLElement;

  componentDidUpdate(preProps: any) {
    if (preProps.show !== this.props.show && this.props.show) {
      lock(this.modalContent)
      this.setState({
        panelShow: true
      })
      setTimeout(() => {
        this.setState({
          aniType: 'unfold'
        })
      }, 0)
    } else if (preProps.show !== this.props.show && !this.props.show) {
      unlock()
      this.setState({
        canSubmit: false,
        checkedColItem: undefined,
      })
      this.setState({
        aniType: 'fold'
      })
      setTimeout(() => {
        this.setState({
          panelShow: false
        })
      }, 300)
    }
  }


  handleClosePanel = (e: React.MouseEvent<HTMLDivElement>) => {
    // @ts-ignore
    if (e.target.getAttribute('id') === 'collection-panel-con') {
      this.props.close()
    }
  }

  handleItemCheck = (item: OwnColDetail) => {
    if (item.showStatus !== 1) return
    this.setState({
      checkedColItem: item.id,
      canSubmit: true
    })
  }

  goToGuide = () => {
    window.location.href = '//www.lofter.com/front/customer-service/#/question-answer/1000520'
  }

  submit = async () => {
    if (!this.state.canSubmit) return
    await addInvite(
      this.state.checkedColItem,
      this.props.activityId
    )
    this.props.refresh?.()
    this.props.close()
  }

  render() {
    const {
      data
    } = this.props
    const {
      aniType,
      canSubmit,
      checkedColItem,
      panelShow
    } = this.state

    return (
      createPortal((
        <Container
          show={panelShow}
          onClick={this.handleClosePanel}
          id="collection-panel-con"
          className={
            `${
              aniType === 'unfold'
                ? 'unfold-con'
                : ''
            }`
          }
        >
          <PanelContainer
            aniType={aniType}
            className={
              `${
                aniType === 'unfold'
                  ? 'unfold-panel'
                  : ''
              }`
            }
          >
            <PanelContentContainer>
              <Header>
                <HeaderHandle />
              </Header>
              <Title>
                选择合集
                <div
                  className="link"
                  onClick={this.goToGuide}
                >
                  <Image
                    src="https://lofter.lf127.net/1637129266373/common_icon_notice_light.png"
                    width={32}
                    height={32}
                    className="icon"
                  />
                  共创合集
                </div>
              </Title>
              <ListContainer
                ref={ref => this.modalContent = ref}
              >
                {
                  data?.map(item => (
                    <ListItem
                      checked={item.id === checkedColItem}
                      onClick={this.handleItemCheck.bind(this, item)}
                      disabled={item.showStatus !== 1}
                    >
                      <Image
                        src={item.coverUrl}
                        width={60}
                        height={60}
                        className="cover"
                      />
                      <div className="info">
                        <div className="title">
                          {item.name}
                        </div>
                        {
                          item.showStatus === 2 || item.showStatus === 3
                            ? (
                              <span className="label">
                                {
                                  item.showStatus === 2 && '已发布'
                                }
                                {
                                  item.showStatus === 3 && '已满员'
                                }
                              </span>
                            )
                            : item.collectionType === 1 && (
                              <span className="label">共创</span>
                            )
                        }
                      </div>
                      <span className="radio" />
                    </ListItem>
                  ))
                }
              </ListContainer>
              <FixedButton
                disabled={!canSubmit}
              >
                <div 
                  className="button"
                  onClick={this.submit}
                >
                  确定
                </div>
              </FixedButton>
            </PanelContentContainer>
          </PanelContainer>
        </Container>
      ), document.getElementById('app')!)
    )
  }
}