import React, { useState } from "react";
import { useMediaQuery } from "react-responsive";
import { Form, Input, Button, Card, Flex, message } from "antd";
import TurnstileModal from "../components/TurnstileModal";
import { ArrowRightOutlined } from "@ant-design/icons";
const ContactView = ({ setCurrentView }) => {
  const isMobile = useMediaQuery({ maxWidth: 600 });
  const [turnstileOpen, setTurnstileOpen] = useState(false);
  const [email, setEmail] = useState("");
  const handleSubmit = async (token) => {
    if (!token) {
      setTurnstileOpen(true); // Open Turnstile modal
      return;
    }

    console.log("Got token", token);
    console.log("Got email", email);

    try {
      const response = await fetch("https://web.tombutcher.work/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, token }),
      });

      const data = await response.json();
      if (data.success) {
        message.success("Message sent successfully!");
      } else {
        message.error("Verification failed. Try again.");
      }
    } catch (error) {
      message.error("Error sending request.");
    }
  };
  return (
    <div className="tbview">
      <Card
        className={"tbcard"}
        title="Contact"
        style={{
          width: isMobile ? "100%" : "70%",
          height: isMobile ? "100%" : "70%",
        }}
        actions={[
          <Button
            className={"tbbutton"}
            key="back"
            onClick={() => setCurrentView("index")}
            icon={
              <img
                src="https://cdn.tombutcher.work/icons/web/w-back.svg"
                alt="Back"
                style={{ height: "14px", marginBottom: "1px" }}
              />
            }
          >
            Back
          </Button>,
        ]}
      >
        <div style={{ minWidth: isMobile ? "100%" : "70%" }}>
          <p>Enter your email below and I will be in contact:</p>
          <Form
            layout="vertical"
            onFinish={() => {
              handleSubmit();
            }}
            style={{ paddingBottom: "5px" }}
          >
            <Form.Item
              name="email"
              rules={[{ required: true, message: "Please enter your email" }]}
              style={{ marginBottom: "8px" }}
              onChange={(e) => setEmail(e.target.value)}
            >
              <Flex gap="small">
                <Input
                  type="email"
                  placeholder="example@example.com"
                  style={{ flex: 1 }}
                />
                <Button type="primary" htmlType="submit">
                  <ArrowRightOutlined />
                </Button>
              </Flex>
            </Form.Item>
          </Form>
          <p>
            I&apos;m often busy, but I&apos;ll make sure to get back to you
            within 48 hours!
          </p>
          <p style={{ marginBottom: "0px", color: "rgb(255 255 255 / 50%)" }}>
            By clicking the submit button, you consent to your email address and
            certain browser-related details (such as an approximate geographical
            location based on your IP) being sent exclusively to me via email.
          </p>
        </div>
      </Card>
      <TurnstileModal
        open={turnstileOpen}
        onClose={() => setTurnstileOpen(false)}
        onSuccess={handleSubmit} // Sends token to handleSubmit
      />
    </div>
  );
};

export default ContactView;