import React, { Component } from "react";
import { userProduct, comment, file } from "~/Redux/actions";

import Navbar from "../Home/Navbar/index";

import Input from "../Contact/Input/index";
import Select from "../Contact/Select/index";
import Upload from "./Upload";
import "./index.scss";
import { connect } from "react-redux";
const maxDesktopSize = 1250;
const maxMobileSize = 550;

const fontSize = {
  desktop: {
    h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
    p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
    span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
  },
  mobile: {
    h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16,
    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 34,
    span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 32,
  },
};

class Support extends Component {
  state = {
    name: null,
    cellphone: null,
    unit: null,
    bookId: null,
    subject: null,
    text: null,
    file: null,
    fileId: null,
  };
  componentDidMount() {
    if (!this.props.myProductList && this.props.status)
      this.props.getUserProductList({});
  }
  onChange = (name, value, type) => {
    if (type === "file") {
      this.props.upload({ file: value, target: name });
    }
    this.setState({
      [name]: value,
    });
  };
  async send() {
    const {
      submit,
      status: { userId },
    } = this.props;
    const { text, fileId, name, cellphone, unit, bookId, subject } = this.state;
    await submit({
      fileId,
      text,
      name,
      cellphone,
      unit,
      bookId,
      subject,
      userId,
    });
    //todo redirectHome
  }
  render() {
    const grades = [
      window.t("پیش دبستان"),
      window.t("اول"),
      window.t("دوم"),
      window.t("سوم"),
      window.t("چهارم"),
      window.t("پنجم"),
      window.t("ششم"),
      window.t("هفتم"),
      window.t("هشتم"),
      window.t("نهم"),
      window.t("دهم"),
      window.t("یازدهم"),
      window.t("دوازدهم"),
    ];
    let { status } = this.props;
    let opt = [
      window.t("واحد مورد نظر"),
      window.t("واحد فروش"),
      window.t("واحد فنی"),
      window.t("واحد محتوایی"),
    ];
    opt = opt.map((e) => [e, e]);
    return (
      <>
        <div className="mobile-support d-flex flex-column align-items-center">
          <Navbar page={"support"} />
          <div
            className={
              "mobile-support__form d-flex flex-column " +
              (window.lang === "en" ? "ltr" : "")
            }
          >
            <h1 style={{ fontSize: fontSize.mobile.h1 }}>
              {window.t("پشتیبانی")}
            </h1>
            <p>
              {window.t(
                "برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید."
              )}{" "}
            </p>
            {status ? null : (
              <>
                <Input
                  label={window.t("نام ‌و ‌نام خانوادگی")}
                  name={"name"}
                  parent={this}
                />
                <Input
                  label={window.t("شماره تماس")}
                  name={"cellphone"}
                  parent={this}
                />
              </>
            )}
            <Select
              required
              name="unit"
              options={
                status && this.props.myProductList?.length
                  ? opt
                  : opt.slice(0, 3)
              }
              parent={this}
            />
            {this.state.unit === window.t("واحد محتوایی") ? (
              <Select
                required
                name="bookId"
                options={[
                  ...new Set(
                    this.props.myProductList?.map((item) => [
                      item.product.book.id,
                      `${item.product.book.name} ${window.t("پایه")} ${
                        grades[item.product.book.gradeId]
                      }`,
                    ]) || []
                  ),
                ]}
                parent={this}
              />
            ) : null}
            <Input
              label={window.t("موضوع")}
              name={"subject"}
              parent={this}
              required
            />
            <Input
              label={window.t("متن")}
              name={"text"}
              parent={this}
              multiline
              required
            />
            {/* <textarea placeholder="متن " name="text" rows="8" o></textarea> */}

            <Upload
              type="file"
              onChange={(e) => this.addFile(e)}
              parent={this}
              name="file"
            />

            <button onClick={() => this.send()}>{window.t("ارسال")}</button>
          </div>
        </div>
      </>
    );
  }
}

export default connect(
  (state) => ({
    myProductList: state.userProduct.myList,
    status: state.user.status,
    uploadFileId: state.file.supportFileId,
    lang: state.publicApi.lang,
  }),
  {
    getUserProductList: userProduct.myList,
    submit: comment.add,
    upload: file.upload,
  }
)(Support);