import React from "react";
import Head from "next/head";
import Image from "next/image";
import { connect } from "react-redux";
import { withRouter } from "next/router";
import moment from "moment";
import { SpinnerCircular } from "spinners-react";

import { reduxWrapper } from "../../store";

import Header from "../components/Header";
import Footer from "../components/Footer";
import Company from "../components/Company";
import InnerMenu from "./components/InnerMenu";

import {
  getContractInfo,
  getContractAgreement,
  getContractRules,
  getFile,
} from "../../actions";

class ContractPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: null,
      car: null,
      contract_date: null,
      agreement: null,
      rules: null,
      loading: false,
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    return {
      date: nextProps.date,
      car: nextProps.car,
      contract_date: nextProps.contract_date,
      agreement: nextProps.agreement,
      rules: nextProps.rules,
    };
  }

  componentDidMount() {
    if (!this.state.loading && this.props.number !== undefined) {
      this.setState({ loading: true }, () => {
        getContractInfo({
          dispatch: this.props.dispatch,
          number: this.props.number,
        })
          .then((info) => {
            console.log("info", info);

            getContractRules({
              dispatch: this.props.dispatch,
              date: moment(info.date, "YYYY-MM-DD").format("DD.MM.YYYY"),
            })
              .then(() => {})
              .catch(() => {});
          })
          .catch(() => {});

        getContractAgreement({
          dispatch: this.props.dispatch,
          number: this.props.number,
        })
          .then(() => {
            this.setState({ loading: false });
          })
          .catch(() => {});
      });
    }
  }

  render() {
    const { loading, date, car, contract_date, agreement, rules } = this.state;
    const { number } = this.props;

    console.log("rules", rules);

    const types = {
      contracts: "Договор",
      redemptions: "Выкупные документы",
      agreements: "Дополнительное соглашение",
      assignments: "Договор цессии",
    };

    return (
      <React.Fragment>
        <Head>
          <title>ЛК Эволюция автолизинга</title>
          <meta name="description" content="ЛК Эволюция автолизинга" />
        </Head>
        <Header {...this.props} />
        <main>
          <section>
            <div className="clear"></div>
            <div className="container">
              <div className="title_wrapper">
                <div className="left" style={{ flexDirection: "column" }}>
                  <h1 className="section_title">Договор №{number}</h1>
                  <h5 style={{ fontSize: "14px" }}>
                    {date !== undefined && date !== null && date !== null && (
                      <> от {moment(date).format("DD.MM.YYYY")}</>
                    )}
                    {car !== undefined && car !== null
                      ? ` - ${car.brand.name} ${car.model.name} | ${
                          car.reg_number !== null
                            ? car.reg_number
                            : "без рег. номера"
                        } | ${
                          car.vin_number !== null
                            ? car.vin_number
                            : "без VIN номера"
                        }`
                      : ""}
                  </h5>
                </div>
                <Company />
              </div>
              <div className="aside_container about">
                <InnerMenu number={number} {...this.props} />
                <article>
                  <ul className="list events-list">
                    <li className="new">
                      <p className="name">
                        <b>
                          Внимание! Просрочена дата возврата СТС по договору:
                          ХХ.ХХ.ХХХХ
                        </b>
                      </p>
                      <p className="type">Важное</p>
                      <p className="date">10.01.2022</p>
                      <p className="action">
                        <a href="">Посмотрите порядок возврата СТС</a>&nbsp; или
                        &nbsp;<a href="">Загрузите скан СТС</a>
                      </p>
                    </li>
                    <li className="new">
                      <p className="name">
                        <b>
                          Внимание! Просрочена дата возврата СТС по договору:
                          ХХ.ХХ.ХХХХ
                        </b>
                      </p>
                      <p className="date">10.01.2022</p>
                      <p className="action">
                        <a href="">Посмотрите порядок возврата СТС</a>&nbsp; или
                        &nbsp;<a href="">Загрузите скан СТС</a>
                      </p>
                    </li>
                    <li className="new">
                      <p className="name">
                        Внимание! Осталось ХХ дней до пролонгации КАСКО по
                        договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно
                        продлить полис ОСАГО
                      </p>
                      <p className="date">10.01.2022</p>
                      <p className="action">
                        <a href="">Подробнее</a>
                      </p>
                    </li>
                  </ul>
                </article>
              </div>
            </div>
          </section>
        </main>
        <Footer />
      </React.Fragment>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    contract_date: state.contract.date,
    date: state.contract.date,
    car: state.contract.car,
    agreement: state.contract.agreement,
    rules: state.contract.rules,
  };
}

export const getServerSideProps = reduxWrapper.getServerSideProps(
  (store) =>
    async ({ req, res, query }) => {
      return {
        props: {
          //number: query.number,
          number: null,
        },
      };
    }
);

export default withRouter(connect(mapStateToProps)(ContractPage));
