import React, { useState } from "react";
import { Col, Form, Modal, Row } from "react-bootstrap";
import InputField from "../Inputfield/Inputfield";
import SubmitForm from "../SubmitForm/SubmitForm";
import { useTranslation } from "react-i18next";
import axios from "axios";

const API_PATH = "/api/contact/index.php";

export default function Iform() {
  const { t } = useTranslation();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [lgShow, setLgShow] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name && email && phone) {
      axios({
        method: "post",
        url: `${API_PATH}`,
        headers: { "content-type": "application/json" },
        data: { name, email, phone },
      })
        .catch((error) => console.error(error))
        .finally(() => {
          setName("");
          setEmail("");
          setPhone("");
          setLgShow(true);
        });
    }
  };

  return (
    <>
      <div>
        <Row className="justify-content-center d-flex pt-5 " id="contactus">
          <Col
            lg={7}
            md={6}
            sm={10}
            xs={10}
            className="shadow"
            style={{
              backgroundColor: "white",
              padding: "30px",
              borderRadius: "10px",
            }}>
            <Form>
              <div className="pb-4 ">
                <h2 style={{ fontFamily: "semibold", fontSize: "32px" }}>
                  {t("contact.heading")}
                </h2>
              </div>

              <Row className="g-2 pt-1 pb-1">
                <Col>
                  <InputField
                    required={true}
                    type="text"
                    lable={t("contact.name.lable")}
                    placeholder={t("contact.name.placeholder")}
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                  />
                </Col>
              </Row>
              <Row className="g-2 pt-2 pb-2">
                <Col>
                  <InputField
                    required={true}
                    type="email"
                    lable={t("contact.email.lable")}
                    placeholder={t("contact.email.placeholder")}
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                  />
                </Col>
              </Row>
              <Row className="g-2 pt-1 pb-1">
                <Col>
                  <InputField
                    type="phone"
                    lable={t("contact.phone.lable")}
                    bottomlable="Elfelejtette jelszavat?"
                    placeholder={t("contact.phone.placeholder")}
                    onValue={phone}
                    onChange={(e) => setPhone(e.target.value)}
                  />
                </Col>
              </Row>
              <div className=" pt-4">
                <SubmitForm onSubmit={handleSubmit} />
              </div>
            </Form>
          </Col>
        </Row>
      </div>
      <Modal
        size="lg"
        show={lgShow}
        onHide={() => setLgShow(false)}
        aria-labelledby="example-modal-sizes-title-lg">
        <Modal.Header closeButton>
          <Modal.Title id="example-modal-sizes-title-lg">
            <div style={{ color: "#0262F7", fontFamily: "semibold" }}>
              {t("contact.submitedpopup")}
            </div>
          </Modal.Title>
        </Modal.Header>
      </Modal>
    </>
  );
}
