"use client";

import Typography from "@/shared/ui/components/Typography/Typography";
import "./Support.scss";
import Image from "next/image";
import header from "./assets/header.svg";
import { Metadata } from "next";
import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
import { apiInstance } from "@/shared/config/apiConfig";
import { IMetatag } from "@/shared/types/metatag-type";
import { useState } from "react";

const Support = () => {

  const [isSent, setIsSent] = useState(false);
  const [userName, setUserName] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  
  const handleSubmit: React.MouseEventHandler<
    HTMLFormElement
  > = async (e) => {
    e.preventDefault();

    const data = {
      name: userName,
      phone: phone,
      email: email,
      message: message
    };

    try {
      
      const res = await apiInstance.post(
        "/support/",
        data
      );
    } catch (error) {
      console.log(error);
    }
    setIsSent(true);
  };


  function buttonIsActive()
  {
    return message === "" || userName === "";
  }


  return (
    <div className="support page-padding">
      <BreadCrumbs homeRequired />
      <Typography element="h2">Поддержка</Typography>
      <div className="support__descriptions">

        <h3>
          <span id="blue-point" /> Напишите нам
        </h3>

        {!isSent ? (

          <form onSubmit={handleSubmit} className="support">
            <div className="support__input">
              <label>Как вас зовут*:</label>
              <div>
                <input name="name"
                  type="text"
                  value={userName}
                  onChange={(e) => setUserName(e.target.value)}
                /></div>
            </div>
            <div className="support__input">
              <label>Телефон:</label>
              <div>
                <input
                  name="phone"
                  type="phone"
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                />
              </div>
            </div>
            <div className="support__input">
              <label>Email:</label>
              <div>
                <input
                  name="email"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>
            </div>
            <div className="support__input">
              <label>Сообщение*:</label>
              <div>
                <div className="support__input">
                  <textarea name="review" 
                                    value={message}
                                    onChange={(e) => setMessage(e.target.value)}
                  
                  
                  />
                </div>
              </div>
              <button type="submit" 
              className={`support__btn${
                buttonIsActive() ? "" : "_active"
              }`}
              disabled={buttonIsActive()}>Отправить</button>
            </div>
          </form>
        ) : (
          <p>Спасибо за ваше сообщение!</p>
        )
        }


      </div>
    </div>
  );
};

export default Support;
