import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Dropzone from 'react-dropzone'
import classNames from 'classnames'
import Datetime from 'react-datetime'
import moment from 'moment'

import {
  Modal,
  ModalBody,
  ModalFooter,
  ModalHeader,
  Button,
  Col,
  FormGroup,
  Card,
  CardHeader,
  CardBody,
  Row,
  Input,
  InputGroup,
  InputGroupAddon,
  InputGroupText
} from 'reactstrap'

import { PanelHeader, FormInputs } from '../../components'
import Gallery from '../../components/gallery'
import Question from './components/question'
import Header from './components/header'

import * as DataActions from '../../services/actions/data'
import * as CommonActions from '../../services/actions/common'


import './style.scss'
import { Link } from "react-router-dom";
import logo from "../../assets/img/black-logo.png";


const mapStateToProps = (state) => {
  return ({
    selectedChildren: state.data.selectedChildren,
    galleries: state.data.galleries,
    questions: state.data.questions,
    facts: state.data.facts,
    user: state.auth.user
  })
}


const mapDispatchToProps = (dispatch) => {
  return ({
    commonActions: bindActionCreators(CommonActions, dispatch),
    dataActions: bindActionCreators(DataActions, dispatch)
  })
}


class Dashboard extends React.Component {
  componentDidMount() {

    if (this.props.selectedChildren.length > 0) {
      this.loadGallery(this.props.selectedChildren)
    }
    this.setState({
      name: moment().format('Do MMMM YYYY'),
      real_name: moment().format('YYYY-MM-DD')
    })
    //

    this.setState({
      userDates: this.props.user,
      allGalleries: this.props.galleries,
      selectedChildren: this.props.selectedChildren
    });
  }

  componentDidUpdate() {
    //

    if (this.props.user && this.props.user.children && this.props.user.children.data) {
      console.log('iiiii', this.props.user.children.data[0])
      this.props.dataActions.addChild(this.props.user.children.data[0])
    }
  }


  componentWillReceiveProps(newProps) {
    if (
      this.props.selectedChildren.length != newProps.selectedChildren.length &&
      newProps.selectedChildren.length > 0
    ) {
      this.loadGallery(newProps.selectedChildren)
    }
    if (newProps.selectedChildren.length == 0 && newProps.location.pathname.indexOf('/dashboard/relative') > -1) {
      newProps.history.push('/dashboard/browse')
    }
    this.setState({
      userDates: newProps.user,
      allGalleries: newProps.galleries,
      selectedChildren: newProps.selectedChildren
    });

  }


  constructor(props) {
    super(props)
    this.state = {
      selectedFiles: [],
      name: '',
      real_name: '',
      year: '',
      description: '',
      selected_child: 'all',
      userDates: [],
      allGalleries: [],
      years: ['All', '2018', '2017', '2016', '2015'],
      selected_year: 'All',
      imageSpiner: false,
      selectedChildren: [],

      months: [
        { label: 'All', value: 0 },
        { label: 'Dec', value: 12 },
        { label: 'Nov', value: 11 },
        { label: 'Oct', value: 10 },
        { label: 'Sep', value: 9 },
        { label: 'Aug', value: 8 },
        { label: 'Jul', value: 7 },
        { label: 'Jun', value: 6 },
        { label: 'May', value: 5 },
        { label: 'Apr', value: 4 },
        { label: 'Mar', value: 3 },
        { label: 'Feb', value: 2 },
        { label: 'Jan', value: 1 },
      ],
      selected_month: { label: 'All', value: 0 }
    }

    this.loadGallery = this.loadGallery.bind(this)
    this.onDrop = this.onDrop.bind(this)
    this.handleInput = this.handleInput.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)

    this.removeQuestion = this.removeQuestion.bind(this)
    this.renderQuestions = this.renderQuestions.bind(this)
    this.renderChildren = this.renderChildren.bind(this)

    this.onClickChild = this.onClickChild.bind(this)
    this.onClickYear = this.onClickYear.bind(this)
    this.onClickMonth = this.onClickMonth.bind(this)
  }


  onClickChild(child_id) {
    this.setState({
      selected_child: child_id
    })
  }

  onClickYear(year) {
    this.setState({
      selected_year: year
    })
  }

  onClickMonth(month) {
    let value = 0
    this.state.months.map(m => {
      if (m.label == month) {
        value = m.value
      }
    })
    this.setState({
      selected_month: { label: month, value: value }
    })
  }

  loadGallery(selectedChildren) {
    if (
      this.props.history.location.state &&
      !this.props.history.location.state.from
    ) {
      this.props.dataActions.getGaleries(this.props.history.location.state.id, selectedChildren).then(res => {
      }).catch(err => {
        this.props.commonActions.alert({ type: 'danger', message: err.data.message })
        throw err
      })
    } else {
      this.props.dataActions.getGaleries(null, selectedChildren).then(res => {
      }).catch(err => {
        this.props.commonActions.alert({ type: 'danger', message: err.data.message })
        throw err
      })
      this.props.dataActions.getQuestions(selectedChildren).then(res => {
      }).catch(err => {
        this.props.commonActions.alert({ type: 'danger', message: err.data.message })
        throw err
      })
      this.props.dataActions.getFacts(selectedChildren).then(res => {
      }).catch(err => {
        this.props.commonActions.alert({ type: 'danger', message: err.data.message })
        throw err
      })
    }
  }

  onDrop(acceptedFiles, rejectedFiles) {
    this.setState(({ selectedFiles }) => ({
      selectedFiles: selectedFiles
        .concat(acceptedFiles)
        .filter(
          file => file.type.includes('image') || file.type.includes('video'),
        ),
    }))
  }

  handleInput(key, value) {
    this.setState({ [key]: value })
  }


  handleSubmit() {
    if (!this.state.name) {
      this.props.commonActions.alert({ type: 'danger', message: 'Name is required!' })
      return
    }
    if (!this.state.selectedFiles.length) {
      this.props.commonActions.alert({ type: 'danger', message: 'You must provide some files!' })
      return
    }
    if (this.state.selected_child == '') {
      this.props.commonActions.alert({ type: 'danger', message: 'You must choose a children or all.' })
      return
    }

    if (this.props.location.state && this.props.location.state.permission != 'see-edit-diary') {
      this.props.commonActions.alert({ type: 'danger', message: 'You do not have permission.' })
      return
    }

    const formData = new FormData();
    this.state.selectedFiles.forEach(file => {
      formData.append('files[]', file)
    })

    if (this.state.selected_child == 'all') {
      this.props.selectedChildren
        .map(x => x.id)
        .forEach(child => {
          formData.append('children[]', child)
        })
    } else {
      formData.append('children[]', this.state.selected_child)
    }

    formData.set('name', this.state.real_name)
    formData.set('description', this.state.description)
    const URL = this.props.location.state
      ? `galleries/${this.props.location.state.id}`
      : 'galleries'
    this.setState({ imageSpiner: true })
    this.props.dataActions.saveGallery(URL, formData, {}).then(res => {
      this.loadGallery(this.props.selectedChildren)
      this.setState({
        selectedFiles: [],
        name: moment().format('Do MMMM YYYY'),
        real_name: moment().format('YYYY-MM-DD'),
        description: '',
        imageSpiner: false,
      })
      this.props.commonActions.alert({ type: 'success', message: 'Successfully added content' })
    }).catch(err => {
      this.props.commonActions.alert({ type: 'danger', message: err.data.message })
      this.setState({ imageSpiner: false })
      throw err
    })
    let d = new Date(this.state.real_name)
    let c = d.getFullYear()
    let YearStatus = false
    if (this.state.userDates.gallery_dates.years) {
      for (let i = 0; i < this.state.userDates.gallery_dates.years.length; i++) {

        if (this.state.userDates.gallery_dates.years[i] === c) {
          YearStatus = true

        }
        else {
        }
      }
    }
    if (YearStatus === true) {
      this.state.userDates = this.state.userDates
    }
    else {
      this.state.userDates = this.state.userDates.gallery_dates.years.push(c)
    }
  }

  removeQuestion(id) {
    let tempList = []
    this.props.questions.map(item => {
      if (item.id != id) {
        tempList.push(Object.assign({}, item))
      }
    })
    this.props.dataActions.updateQuestions(tempList)
  }

  renderQuestions() {
    if (this.props.selectedChildren.length) {
      const child_id = this.props.selectedChildren.slice(-1)[0].id
      const child = this.props.selectedChildren.slice(-1)[0]
      return (
        <Question
          removeQuestion={this.removeQuestion}
          child_id={child_id}
          child={child}
          {...this.props}
        />
      )
    } else {
      return null
    }
  }


  renderChildren() {
    if (this.props.user && this.props.user.children) {
      if (
        this.props.history.location.state &&
        !this.props.history.location.state.from
      ) {
        return this.props.history.location.state.children.data.map(child => (
          <span
            key={child.id}
            className={child.id == this.state.selected_child ? 'span-active span-child' : 'span-child'}
            onClick={() => this.onClickChild(child.id)}
          >
            {child.name}
          </span>
        ))
      }
      return this.props.user.children.data.map(child => (
        <span
          key={child.id}
          className={child.id == this.state.selected_child ? 'span-active span-child' : 'span-child'}
          onClick={() => this.onClickChild(child.id)}
        >
          {child.name}
        </span>
      ))
    }

    return null
  }



  render() {
    const { user } = this.props
    const { userDates } = this.state
    const { selected_year, selected_month } = this.state
    let newCheck = []
    let childrenNumber = 0
    if (userDates.children) {
      newCheck = userDates.children.data
      childrenNumber = newCheck.length > 0 ?
        <div></div> :
        <div className='addChildren'>
          Please add a new children
      </div>
    }
    let galleries = []
    this.state.allGalleries.map(item => {
      if (selected_year == 'All') {
        if (selected_month.label == 'All') {
          galleries.push(item)
        } else {
          let date = new Date(item.created_at.default.date)
          if (selected_month.value == date.getMonth() + 1) {
            galleries.push(item)
          }
        }
      } else {
        let date = new Date(item.created_at.default.date)
        if (selected_month.label == 'All') {
          if (selected_year == date.getFullYear().toString()) {
            galleries.push(item)
          }
        } else {
          if (selected_year == date.getFullYear().toString() && selected_month.value == date.getMonth() + 1) {
            galleries.push(item)
          }
        }
      }
    })
    let showQuestion = this.state.allGalleries.map((questions, i) => {
      return (
        <div>
          {questions.questions.data.map((quest, i) => (
            <div key={i}>{quest.name}</div>
          ))}
        </div>
      )
    })
    return (
      <div className="dashboard-page">
        <div className="mainLogo logo py-4">
          <div className="logo-img d-flex justify-content-center">
            <Link to="/">
              <img src={logo} alt="react-logo" />
            </Link>
          </div>
        </div>
        <PanelHeader
          size="lg"
          content={
            <Header {...this.props} />
          }
        />
        {this.state.imageSpiner ?
          <div className="spinner-bg">
            <div className="spinner">
              <div className="bounce1"></div>
              <div className="bounce2"></div>
              <div className="bounce3"></div>
            </div>
          </div> : <div></div>}
        {childrenNumber}
        <div className="content">
          <Row className="position-relative align-items-start">
            <Col className="dashboard-content">
              <Card>
                <CardBody>
                  <div className="input-content">
                    <Row>
                      <Col md={12}>
                        <FormGroup className="mb-0">
                          <Input
                            className="custom-text-field"
                            type="text"
                            placeholder="What cool happend today?"
                            value={this.state.description}
                            onChange={e => this.handleInput('description', e.target.value)}
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                    <Row>
                      <Col className="d-flex align-items-center justify-content-start flex-wrap tags-bar">
                        <i className="tag-icon now-ui-icons shopping_tag-content span-child" />
                        {this.renderChildren()}
                        <span
                          className={'all' == this.state.selected_child ? 'span-active span-child' : 'span-child'}
                          onClick={() => this.onClickChild('all')}
                        >
                          All
                        </span>
                      </Col>
                      <Col className="d-flex align-items-center justify-content-center flex-wrap photos-bar">
                        <Dropzone onDrop={this.onDrop}>
                          {({ getRootProps, getInputProps, isDragActive }) => {
                            return (
                              <div
                                {...getRootProps()}
                                className={classNames('dropzone', {
                                  'dropzone--isActive': isDragActive,
                                })}
                              >
                                <input {...getInputProps()} />
                                {isDragActive ? (
                                  <div className="d-flex align-items-center justify-content-center flex-wrap">
                                    <span className="span-child p-0 ml-1">Drop file here...</span>
                                  </div>
                                ) : (
                                    <div className="d-flex align-items-center justify-content-center flex-wrap">
                                      <i className="tag-icon now-ui-icons media-1_camera-compact span-child p-0" />
                                      <span className="span-child p-0 ml-1">Add Photos / Videos</span>
                                    </div>
                                  )}
                              </div>
                            );
                          }}
                        </Dropzone>
                        {this.props.selectedChildren.length !== 0 ?
                          <Button
                            size="sm"
                            className="ml-2"
                            color="primary"
                            onClick={this.handleSubmit}>
                            Submit
                          </Button> :
                          <Button
                            size="sm"
                            className="ml-2"
                            color="primary"
                            disabled>
                            Submit
                           </Button>}

                      </Col>
                      <Col className="d-flex align-items-center justify-content-end flex-wrap date-bar">
                        <InputGroup
                          className="custom-date no-border form-control-lg"
                        >
                          <Datetime
                            value={this.state.name}
                            dateFormat={'Do MMMM YYYY'}
                            timeFormat={false}
                            inputProps={{ placeholder: '' }}
                            onChange={x => {
                              if (x.format) {
                                this.setState({ name: x.format('Do MMMM YYYY'), real_name: x.format('YYYY-MM-DD') })
                              } else {
                                this.setState({ name: x, real_name: x })
                              }
                            }}
                          />
                          <InputGroupAddon addonType="append">
                            <InputGroupText>
                              <i className="fa fa-icon fa-pencil" />
                            </InputGroupText>
                          </InputGroupAddon>
                        </InputGroup>
                      </Col>
                    </Row>
                    <Row>
                      <Col md={4} className="m-auto d-flex align-items-center justify-content-center flex-wrap">
                        {this.state.selectedFiles.map((x, i) => (
                          <p key={i}>{x.name}</p>
                        ))}
                      </Col>
                    </Row>
                  </div>

                  {
                    userDates && userDates.gallery_dates && userDates.gallery_dates.years && userDates.gallery_dates.months ?
                      <div className="date-select-content">
                        <div className="d-flex align-items-center justify-content-end flex-wrap year-date">
                          <span
                            className={'All' == this.state.selected_year ? 'span-active span-year' : 'span-year'}
                            onClick={() => this.onClickYear('All')}
                          >
                            All
                          </span>
                          {
                            userDates.gallery_dates.years.map(year => {
                              return (
                                <span
                                  key={year.toString()}
                                  className={year.toString() == this.state.selected_year ? 'span-active span-year' : 'span-year'}
                                  onClick={() => this.onClickYear(year.toString())}
                                >
                                  {year.toString()}
                                </span>
                              )
                            })
                          }
                        </div>
                        <div className="d-flex align-items-center justify-content-end flex-wrap">
                          <span
                            className={'All' == this.state.selected_month.label ? 'span-active span-month' : 'span-month'}
                            onClick={() => this.onClickMonth('All')}
                          >
                            All
                          </span>
                          {
                            userDates.gallery_dates.months.map(month => {
                              return (
                                <span
                                  key={month}
                                  className={month == this.state.selected_month.label ? 'span-active span-month' : 'span-month'}
                                  onClick={() => this.onClickMonth(month)}
                                >
                                  {month}
                                </span>
                              )
                            })
                          }
                        </div>
                      </div>
                      :
                      null
                  }

                  <div className="main-content">
                    {
                      galleries.length > 0 ?
                        galleries.map(gallery => (
                          <Gallery
                            own={!this.props.location.state}
                            gallery={gallery}
                            key={gallery.id}
                            {...this.props}
                          />
                        ))
                        :
                        null
                    }
                  </div>
                </CardBody>
              </Card>
            </Col>
            <Col xs={12} className="question-row">
              {this.renderQuestions()}
            </Col>
          </Row>
        </div>

      </div>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)