import React, { Component, Fragment } from "react"
import PropTypes from "prop-types"
import { Box, Image, Column, Row, Button, Link } from "ui"
import { MessageModal, WaitModal, YesNoMessageModal } from "../Modal"
import { sizeInfo, colorInfo } from "ui/style"
import headerLogo from "images/logo.png"
import autobind from "autobind-decorator"
import { api } from "../API"

export class System extends Component {
  static propTypes = {
    changeTitle: PropTypes.func.isRequired,
  }

  constructor(props) {
    super(props)
    this.state = {
      messageModal: null,
      waitModal: null,
      yesNoModal: null,
    }
  }

  @autobind
  handleDeleteActivities() {
    this.setState({
      yesNoModal: {
        question:
          "Are you sure you want to delete all activities in the system?",
        onDismiss: this.handleDeleteActivitiesDismiss,
      },
    })
  }

  @autobind
  handleDeleteActivitiesDismiss(yes) {
    if (yes) {
      this.setState({ waitModal: { message: "Deleting All Activities..." } })
      api
        .deleteAllActivities()
        .then(() => {
          this.setState({
            waitModal: null,
            messageModal: {
              icon: "thumb",
              message: "All logged activities have been deleted",
            },
          })
        })
        .catch((error) => {
          this.setState({
            waitModal: null,
            messageModal: {
              icon: "hand",
              message: "Unable to request delete activities.",
              detail: error.message,
            },
          })
        })
    }

    this.setState({
      yesNoModal: null,
    })
  }

  @autobind
  handleDeleteWorkItems() {
    this.setState({
      yesNoModal: {
        question:
          "Are you sure you want to delete all work items & activities in the system?",
        onDismiss: this.handleDeleteWorkItemsDismiss,
      },
    })
  }

  @autobind
  handleDeleteWorkItemsDismiss(yes) {
    if (yes) {
      this.setState({
        waitModal: { message: "Deleting All Work Items & Activities..." },
      })
      api
        .deleteAllWorkItems()
        .then(() => {
          this.setState({
            waitModal: null,
            messageModal: {
              icon: "thumb",
              message: "All work items and logged activities have been deleted",
            },
          })
        })
        .catch((error) => {
          this.setState({
            waitModal: null,
            messageModal: {
              icon: "hand",
              message: "Unable to delete work items and activities.",
              detail: error.message,
            },
          })
        })
    }

    this.setState({
      yesNoModal: null,
    })
  }

  @autobind
  handleMessageModalDismiss() {
    this.setState({ messageModal: null })
  }

  render() {
    const { messageModal, yesNoModal, waitModal } = this.state

    return (
      <Fragment>
        <Column.Item grow />
        <Column.Item>
          <Row>
            <Row.Item grow />
            <Row.Item width={sizeInfo.formRowSpacing} />
            <Row.Item width={sizeInfo.modalWidth}>
              <Box
                border={{
                  width: sizeInfo.headerBorderWidth,
                  color: colorInfo.headerBorder,
                }}
                radius={sizeInfo.formBoxRadius}>
                <Column>
                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
                  <Column.Item>
                    <Row>
                      <Row.Item grow />
                      <Row.Item>
                        <Image
                          source={headerLogo}
                          width={sizeInfo.loginLogoWidth}
                        />
                      </Row.Item>
                      <Row.Item grow />
                    </Row>
                  </Column.Item>
                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
                  <Column.Item>
                    <Row>
                      <Row.Item grow />
                      <Row.Item>
                        <Button
                          text="Delete All Activities"
                          width={sizeInfo.buttonWideWidth}
                          onClick={this.handleDeleteActivities}
                        />
                      </Row.Item>
                      <Row.Item grow />
                    </Row>
                  </Column.Item>
                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
                  <Column.Item>
                    <Row>
                      <Row.Item grow />
                      <Row.Item>
                        <Button
                          text="Delete All Work Items"
                          width={sizeInfo.buttonWideWidth}
                          onClick={this.handleDeleteWorkItems}
                        />
                      </Row.Item>
                      <Row.Item grow />
                    </Row>
                  </Column.Item>
                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
                  <Column.Item>
                    <Row>
                      <Row.Item grow />
                      <Row.Item>
                        <Link to={api.makeTeamStatusUrl()}>
                          Download Team Data
                        </Link>
                      </Row.Item>
                      <Row.Item grow />
                    </Row>
                  </Column.Item>
                  <Column.Item height={sizeInfo.formColumnSpacing} />
                </Column>
              </Box>
            </Row.Item>
            <Row.Item grow />
          </Row>
        </Column.Item>
        <Column.Item grow>
          <YesNoMessageModal
            open={!!yesNoModal}
            question={yesNoModal ? yesNoModal.question : ""}
            onDismiss={yesNoModal && yesNoModal.onDismiss}
          />

          <MessageModal
            open={!!messageModal}
            icon={messageModal ? messageModal.icon : ""}
            message={messageModal ? messageModal.message : ""}
            detail={messageModal ? messageModal.title : ""}
            onDismiss={this.handleMessageModalDismiss}
          />

          <WaitModal
            active={!!waitModal}
            message={waitModal ? waitModal.message : ""}
          />
        </Column.Item>
      </Fragment>
    )
  }
}