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


import {
  ModalContainer,
  ModalMask,
  ModalContent,
  ModalContentBg,
  ModalClose,
  Title,
  Button
} from './index.style'

interface Props {
  show: boolean;
  onCancel: () => void;
}

export class NoColModal extends React.Component<Props> {

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

  render() {
    const { show, onCancel } = this.props

    return (
      createPortal((
        <ModalContainer
          show={show}
        >
          <ModalMask />
          <ModalContent>
            <ModalContentBg>
              <ModalClose
                src="https://lofter.lf127.net/1637152192109/pop_delete_normal.png"
                onClick={onCancel}
              />
              <Title>
                你还没有创建合集哦~ 赶紧去创建一个吧！
              </Title>
              <Button
                onClick={this.goToGuide}
              >去创建</Button>
            </ModalContentBg>
          </ModalContent>
        </ModalContainer>
      ), document.getElementById('app')!)
    )
  }
}