import React, { useState, useEffect } from "react";
import "./index.scss";
import Navbar from "../../components/Navbar/index";
import Footer from "../../views/Home/Footer/index";
import Input from "../../components/Input/index";
import onInput from "../../util/onInput";
import Textarea from "../../components/Textarea/index";
import Select from "../../components/Select/index";
import Location from "../../components/Location/index";
import { connect } from "react-redux";
import scroll from "../../util/scroll";
import { publicApi } from "../../redux/actions";

interface FormData {
  name?: string;
  cellphone?: string;
  departman?: string;
  text?: string;
}

function Contact({ departmans, selectedDepartman, contactData, getContactData }: any) {
  const [formData, setFormData] = useState<FormData | undefined>(undefined);
  const [unit, setUnit] = useState("info");
  const onChange = (e: any) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  useEffect(() => {
    scroll.goToTop();
    getContactData();
  }, []);

  return (
    <div className="contact main d-flex flex-column">
      <Navbar />
      <main className="d-flex flex-column">
        <header>
          <h1>تماس با ما</h1>
        </header>
        <div className="mobile flex-column">
          <div className="d-flex contact__tab">
            <figure className={unit !== "info" ? "contact__tab--figureactive" : ""}></figure>
            <button
              className={unit === "info" ? "contact__tab--active" : ""}
              onClick={() => setUnit("info")}
            >
              اطلاعات تماس
            </button>
            <button
              className={unit === "form" ? "contact__tab--active" : ""}
              onClick={() => setUnit("form")}
            >
              فرم تماس
            </button>
          </div>
          {unit === "info" && (
            <section className="contact__info d-flex flex-column py-3">
              <div className="d-flex flex-column">
                <div className="contact__info--data d-flex flex-column">
                  <h2>آدرس</h2>
                  <p>{contactData?.address}</p>
                </div>
                <div className="contact__info--data d-flex flex-column">
                  <h2>شماره تماس</h2>
                  <p>{contactData?.cellphone}</p>
                </div>
                <div className="contact__info--data d-flex flex-column">
                  <h2>ایمیل</h2>
                  <p>{contactData?.email}</p>
                </div>
              </div>
              <div className="contact__info--map d-flex">
                <Location />
              </div>
            </section>
          )}
          {unit === "form" && (
            <section className="contact__form d-flex flex-column">
              <form action="">
                <div className="contact__form--name">
                  <Input
                    name="name"
                    label="نام"
                    align="right"
                    onInput={onInput.persianOnly}
                    onChange={onChange}
                  />
                </div>
                <div className="contact__form--name">
                  <Input
                    name="cellphone"
                    label="شماره موبایل"
                    align="left"
                    onInput={onInput.numberOnly}
                    onChange={onChange}
                  />
                </div>
                <Select
                  onChange={onChange}
                  options={departmans}
                  name="departman"
                  label={"انتخاب دپارتمان"}
                  selectedOptions={selectedDepartman}
                />
                <Textarea placeholder="متن پیام را اینجا تایپ کنید" />
                <div className="d-flex justify-content-end py-4">
                  <button className="submit submit-large">ارسال پیام</button>
                </div>
              </form>
            </section>
          )}
        </div>
        <div className="desktop py-5">
          <section className="contact__form d-flex flex-column">
            <form action="" className="main-311">
              <div className="contact__form--name">
                <Input
                  name="name"
                  label="نام"
                  align="right"
                  onInput={onInput.persianOnly}
                  onChange={onChange}
                />
              </div>
              <div className="contact__form--name">
                <Input
                  name="cellphone"
                  label="شماره موبایل"
                  align="left"
                  onInput={onInput.numberOnly}
                  onChange={onChange}
                />
              </div>
              <Select
                onChange={onChange}
                options={departmans}
                name="departman"
                label={"انتخاب دپارتمان"}
                selectedOptions={selectedDepartman}
              />
              <Textarea placeholder="متن پیام را اینجا تایپ کنید" />
              <div className="d-flex justify-content-end py-4">
                <button className="submit submit-large">ارسال پیام</button>
              </div>
            </form>
          </section>
          <section className="contact__info d-flex flex-column py-3">
            <div className="d-flex flex-wrap justify-content-between">
              <div className="contact__info--data d-flex flex-column">
                <h2>آدرس</h2>
                <p>{contactData?.address}</p>
              </div>
              <div className="contact__info--data d-flex flex-column">
                <h2>شماره تماس</h2>
                <p>{contactData?.cellphone}</p>
              </div>
              <div className="contact__info--data d-flex flex-column">
                <h2>ایمیل</h2>
                <p>{contactData?.email}</p>
              </div>
            </div>
            <div className="contact__info--map d-flex">
              <Location />
            </div>
          </section>
        </div>
      </main>
      <Footer />
    </div>
  );
}

export default connect((state: any) => ({
  departmans: state.publicApi.departmans,
  selectedDepartman: state.publicApi.selectedDepartman,
  contactData: state.publicApi.contactData,
}), {getContactData : publicApi.getContactData})(Contact);
