import React, { Component } from 'react';
import { connect } from 'react-redux';
import LayoutContentWrapper from '../../../../components/utility/layoutWrapper';
import LayoutContent from '../../../../components/utility/layoutContent';
import TitlePage from '../../../../components/5xmais/title-page';
import HeaderPage from '../../../../components/5xmais/header-page';
import LinkBackPage from '../../../../components/5xmais/link-back-page';
import ErrorGetPage from '../../../../components/5xmais/error-get-page';
import LayoutSection from '../../../../components/5xmais/layout-section';
import Questions from '../../../../components/5xmais/questions';
import ConfirmationStep from '../../../../components/5xmais/confirmation-step';
import TitleSection from '../../../../components/5xmais/title-section';
import Presentation from '../../../../components/5xmais/presentation';
import ButtonsFixed from '../../../../components/5xmais/buttons-fixed';
import message from '../../../../components/feedback/message';
import {Content, PresentationStartup} from './style';
import {
  getErrorPage,
  clearUi,
  fetchingApis,
  successUiLoadingApi,
  clearErrosUi
} from '../../../../redux/firstStage/action-creators';
import {
  fetchItem as fetchApplicationFormStartup
} from '../../../../redux/applicationFormStartup/action-creators';
import {
  fetchList as fetchListQuestions,
  saveItem as saveQuestion,
  editItem as editQuestion
} from '../../../../redux/firstStageQuestions/action-creators';
import {
  openAttachment,
  closeAttachment,
  saveItem as saveAttachment
} from '../../../../redux/attachmentApplicationForm/action-creators';

class Page extends Component {
  constructor(props) {
    super(props);
    this.idItem = this.props.match.params.id;
    this.urlBackPage = this.props.match.url.split("/primeira-etapa").shift();
  }

  handleSubmit = (data) => {
    const {
      getErrorPage,
      clearErrosUi,
      saveQuestion,
      editQuestion
    } = this.props;
    clearErrosUi();
    message.loading('Enviando sua resposta...', 0);
    const {id} = data;
    const action = (id) ? editQuestion(id, {...data}) : saveQuestion({...data});
    const messageSuccess = (id) ? 'Sua resposta foi atualizada com sucessso!' : 'Sua resposta foi salva com sucesso!';
    action
      .then(()=>{
        message.destroy();
        message.success(messageSuccess, 3);
      })
      .catch(err => {
        message.destroy();
        getErrorPage(err)
      })
  }

  handleSubmitAttachment = (data) => {
    const {saveAttachment} = this.props
    return console.log('rensga')
  }

  handleConfirmationStep = () => {

  }

  handleAttachment = () => {
    const {openAttachment} = this.props;
    console.log('open')
    openAttachment()
  }
  handleCloseAttachment = () => {
    const {closeAttachment} = this.props;
    console.log('close')
    closeAttachment()
  }

  componentDidMount() {
    const {
      fetchingApis,
      successUiLoadingApi,
      getErrorPage,
      fetchListQuestions,
      fetchApplicationFormStartup
    } = this.props;
    fetchingApis();
    fetchApplicationFormStartup(this.idItem)
      .then(() => fetchListQuestions(this.idItem))
      .then(() => successUiLoadingApi())
      .catch(err => {getErrorPage(err)})
  }

  componentWillUnmount(){
    const {
      clearUi
    } = this.props;
    clearUi();
  }

  render() {
    const {
      isLoading,
      errorPage,
      firstStageQuestions,
      ApplicationFormStartup,
      attachment,
      idToken
    } = this.props;
    const listAttachments = [{
      uid: '-1',
      name: 'xxx.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }, {
      uid: '-2',
      name: 'yyy.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }];
    const questionsNotAnswered = firstStageQuestions.filter(question=>question.startupAnswer===null);
    const disabledButtonConfirmation = (questionsNotAnswered.length) ? true : false;
    const titleStep = (ApplicationFormStartup.applicationForm) ? ApplicationFormStartup.applicationForm.title : 'Apresentação';
    const descriptionStep = (ApplicationFormStartup.applicationForm) ? ApplicationFormStartup.applicationForm.description : '';
    return (
      <Content>
        <LayoutContentWrapper>
          <TitlePage title='Primeira Etapa' />
          <LayoutContent>
            <HeaderPage>
              <LinkBackPage url={this.urlBackPage} />
            </HeaderPage>
            <LayoutSection loading={isLoading}>
              <PresentationStartup>
                <TitleSection title={titleStep} />
                <Presentation text={descriptionStep} />
              </PresentationStartup>
              <Questions
                questions = {firstStageQuestions}
                handleSubmit = {this.handleSubmit}
                applicationFormStartupId = {parseInt(this.idItem, 0)}
              />
              <ConfirmationStep
                text = 'Confirmar Finalização da Primeira Etapa'
                handleClick = {this.handleConfirmationStep}
                disabled = {disabledButtonConfirmation}
              />
            </LayoutSection>
            <ButtonsFixed
              handleAttachment={this.handleAttachment}
              handleSubmitAttachment={this.handleSubmitAttachment}
              handleCancel={this.handleCloseAttachment}
              handleOk={this.handleCloseAttachment}
              idToken={idToken}
              visible={attachment}
              listAttachments={listAttachments}
            />
          </LayoutContent>
          <ErrorGetPage error={errorPage} />
        </LayoutContentWrapper>
      </Content>
    );
  }
}

const mapStateToProps = (state) => ({
  isLoading: state.FirstStage.ui.isFetching,
  errorPage: state.FirstStage.ui.errorPage,
  firstStageQuestions: state.FirstStageQuestions.list.data,
  ApplicationFormStartup: state.ApplicationFormStartup.item.data,
  idToken: state.AuthSystem.idToken,
  attachment: state.AttachmentApplicationForm.ui.attachmentOpen
});

const mapDispatchToProps = (dispatch) => ({
  successUiLoadingApi: () => dispatch(successUiLoadingApi),
  getErrorPage: (data) => dispatch(getErrorPage(data)),
  fetchingApis: () => dispatch(fetchingApis),
  clearUi: () => dispatch(clearUi),
  fetchListQuestions: (id) => dispatch(fetchListQuestions(id)),
  saveQuestion: (data) => dispatch(saveQuestion(data)),
  editQuestion: (id, data) => dispatch(editQuestion(id, data)),
  clearErrosUi: () => dispatch(clearErrosUi),
  fetchApplicationFormStartup: (id) => dispatch(fetchApplicationFormStartup(id)),
  openAttachment: () => dispatch(openAttachment),
  closeAttachment: () => dispatch(closeAttachment),
  saveAttachment: (data) => dispatch(saveAttachment(data)),
});

export default connect(mapStateToProps, mapDispatchToProps)(Page);