import { CheckCircleFilled } from "@ant-design/icons";
import {
  Button,
  Form,
  Input,
  InputNumber,
  message,
  notification,
  Select,
} from "antd";
import React, { FC, useEffect, useState } from "react";
import MediaQuery, { useMediaQuery } from "react-responsive";
import styles from "./enquiries.module.scss";
import cx from "classnames";
import { useRouter } from "next/router";
import * as QuotationAPI from "../../../pages/api/profile";
import _ from "lodash";
import { Message, getEnquiriesData, updateForm } from "./enquiriesData";
import { GrSend } from "react-icons/gr";
import { FiSearch } from "react-icons/fi";
import { RiSendPlaneFill } from "react-icons/ri";
import * as CommonApi from "../../../pages/api/common";
import { baseUrl } from "../../../constants/urls";
import Enquiries from "./Enquiries";
const EditEnquiries: FC<any> = (props) => {
  const { details }: any = props;
  const [form] = Form.useForm();
  const isMobile = useMediaQuery({ maxWidth: 767.68 });
  const width = isMobile ? 320 : 600;
  const fontsize = isMobile ? 10 : 20;
  const desfontsize = isMobile ? 10 : 14;
  const [editFormData, setEditFormData] = useState<any>({});
  const [qouteId, setqouteId] = useState<any>("");
  const [token, setToken] = useState("");
  const router = useRouter();
  const [chartMessage, setchartMessage] = useState<string>("");
  const [isBack, setIsBack] = useState(false);
  const [disable,setDisable] = useState(false);
  const isBackHandler = () => {
    setIsBack(true);
    
  };

  useEffect(() => {
    if (!_.isEmpty(details)) {
      form.setFieldsValue({
        firstName: details.first_name,
        lastName: details.last_name,
        phoneNumber: details.phone,
        email: details.email,
        enquiryType: parseInt(details.type),
        message: details.emessage,
      });
    }
    const val: any = localStorage.getItem("loginDetails");
    const detailsLogin = JSON.parse(val);
    const authtoken: any = !_.isEmpty(detailsLogin) ? detailsLogin.token : null;
    setToken(authtoken);
    setqouteId(router.query.editId);
    getEditQuotationList(authtoken);
  }, [details]);

  const getEditQuotationList = async (token: string) => {
    CommonApi.getRequestWithToken(
      `${baseUrl}/api/enquiries/reply/${details.id}`,
      token
    ).then((res) => {
     
      setEditFormData(res?.data?.data);
    });
  };

  const onFinish = (values: updateForm) => {
    
  };

  const onFinishFailed = () => {
    message.warn("Please fill all fields of the request form!!");
  };

  const validateMessages = {
    required: "${label} is required!",
  };

  

  const sendMessage = (value: string) => {
    // console.log(value, "value");
    setDisable(true);
    if(value==""){
      notification.warning({message:"Please Enter Your Message"});
      setDisable(false);
    }else{
    const payload = {
      customer_reply: value,
      id: details.id,
    };
    CommonApi.postRequestWithToken(
      `${baseUrl}/api/customer-reply-enquiry/${details.id}?token=true`,
      payload,
      token
    ).then((res: any) => {
      console.log(res, "res");

      if (res && res.data.message == "Replied successfully!") {
        notification.open({
          type: "success",
          message: (
            <div
              style={{
                color: "#291C61",
                fontSize: fontsize,
                fontFamily: "Outfit",
              }}
            >
              Message Sent Successfully!
            </div>
          ),
          style: {
            width: width,
            minWidth: 320,
            maxWidth: 568,
            backgroundColor: "#F6FFED",
            border: "1px solid #B7EB8F",
            margin: 0,
            boxShadow: "unset",
            color: "#291C61",
          },
          icon: <CheckCircleFilled style={{ color: "#52C51A" }} />,
        });
      } else {
        notification.open({
          type: "error",
          message: (
            <div
              style={{
                color: "#291C61",
                fontSize: fontsize,
                fontFamily: "Outfit",
              }}
            >
              Quote request sumission Failed!!
            </div>
          ),
          description: (
            <div
              style={{
                color: "#291C61",
                fontSize: desfontsize,
                fontFamily: "Outfit",
              }}
            >
              Please try again after Sometime.
            </div>
          ),
          style: {
            width: width,
            minWidth: 320,
            maxWidth: 568,
            backgroundColor: "pink",
            border: "1px solid #B7EB8F",
            margin: 0,
            boxShadow: "unset",
            color: "#291C61",
          },
        });
      }
      setchartMessage("");
      getEditQuotationList(token);
      setDisable(false);
      
    });
  }
  };

  if (!isBack) {
    return (
      <>
        <div className={cx(styles.enquiryContainer)}>
          <div className="ant-row my-4">
            <div className={cx(styles.h1Styles, "ant-col-xl-22 ant-col-xs-16  pl-1")}>
              View Enquiry Details
            </div>
            <div className="ant-col-xl-2 ant-col-xs-8 px-4 cursor-pointer">
              <span onClick={isBackHandler}>&#60; Back</span>
            </div>
          </div>
          <div className="ant-row">
            <div className="ant-col  ant-col-xs-24 ant-col-xl-12 pl-1">
              <div className={styles.boxContainer}>
                <div
                  style={{
                    boxShadow: "0px 4px 40px rgba(0, 0, 0, 0.06)",
                    padding: "2em",
                    borderRadius:"14px"
                  }}
                >
                  <h1
                    style={{
                      fontFamily: "Outfit",
                      fontStyle: "normal",
                      fontWeight: 600,
                      fontSize: "26px",
                      lineHeight: "20px",
                      color: "#291C61",
                    }}
                  >
                    Enquiry Details
                  </h1>
                  <Form
                    form={form}
                    layout="vertical"
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    validateMessages={validateMessages}
                    autoComplete="off"
                    disabled={true}
                  >
                    <div className={cx("ant-row")}>
                      <Form.Item
                        label="First Name"
                        className={cx(
                          "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                          styles.inputContainer
                        )}
                        name="firstName"
                        rules={[
                          {
                            required: true,
                          },
                        ]}
                      >
                        <Input
                          type="text"
                          className={styles.first_name}
                          placeholder={"First Name"}
                        />
                      </Form.Item>

                      <Form.Item
                        className={cx(
                          "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                          styles.inputContainer
                        )}
                        label="Last Name"
                        name="lastName"
                        rules={[{ required: true }]}
                      >
                        <Input
                          type="text"
                          className={styles.first_name}
                          placeholder={"Last Name"}
                        />
                      </Form.Item>
                    </div>
                    <div className={cx("ant-row")}>
                      <Form.Item
                        label="Phone Number"
                        name="phoneNumber"
                        rules={[
                          { required: true },
                          {
                            type: "string",
                            min: 10,
                            max: 10,
                            message: "Please enter a valid mobile number",
                          },
                        ]}
                        className={cx(
                          "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                          styles.inputContainer
                        )}
                      >
                        <Input
                          type="number"
                          className={cx(styles.first_name, "numberInput")}
                          placeholder={"Phone"}
                          maxLength={10}
                        />
                      </Form.Item>
                      <Form.Item
                        label="Email Address"
                        name="email"
                        rules={[
                          { required: true },
                          {
                            type: "email",
                            pattern:
                              /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
                            message: `Please enter a valid e-mail address`,
                          },
                        ]}
                        className={cx(
                          "ant-col ant-col-sm-24 ant-col-md-12 ant-col-xl-12",
                          styles.inputContainer
                        )}
                      >
                        <Input
                          type="text"
                          className={styles.home__enquiry_form__input_email}
                          placeholder={"Email"}
                        />
                      </Form.Item>
                    </div>
                    <Form.Item
                      label="Type Of Enquiry"
                      name="enquiryType"
                      rules={[
                        {
                          required: true,
                          message: "Please select enquiry type!",
                        },
                      ]}
                    >
                      <Select
                        className={styles.typeEnquiryContainer}
                        allowClear
                        placeholder="Select Enquiry Type"
                        options={[
                          {
                            value: 1,
                            label: "Product Enquiry",
                          },
                          {
                            value: 2,
                            label: "Seller Enquiry",
                          },
                          {
                            value: 3,
                            label: "Other",
                          },
                        ]}
                      />
                    </Form.Item>
                    <Form.Item
                      label="Message"
                      name="message"
                      rules={[
                        { required: true },
                        { type: "string", min: 5, max: 160 },
                      ]}
                    >
                      <Input.TextArea
                        id="footer-newsletter-address"
                        placeholder={"Message"}
                        className={styles.textArea}
                        maxLength={160}
                        showCount
                      />
                    </Form.Item>
                    <Form.Item>
                      <div className={styles.home__enquiry_form__button}/>
                      {/* <Button
                block
                type="primary"
                htmlType="submit"
                className={styles.home__enquiry_form__button}
              >
                Update
              </Button> */}
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </div>
            <div className="ant-col  ant-col-xs-24 ant-col-xl-12 pl-1">
              <div className={styles.chartBoxContainer}>
                <h1 className={styles.chartBoxTitle}>Enquiry Conversation</h1>
                <div className={styles.messageSendBoxContainer}>
                  <div className={styles.chartMessageBoxContainer}>
                    {editFormData.message &&
                      editFormData.message.map((messages: any, i: number) => {
                        return (
                          <div key={i}>
                            {messages.query != "" ? (
                              <React.Fragment key={i}>
                                {messages.customer_name ? (
                                  <div className={styles.chartsBoxCustomer}>
                                    <span className={styles.charts}>
                                      {messages.query}
                                    </span>
                                    <span className={styles.chartTime}>
                                      {messages.sent_at}
                                    </span>
                                  </div>
                                ) : (
                                  <div
                                    className={styles.chartsBoxCustomerSeller}
                                  >
                                    <span className={styles.sellerCharts}>
                                      <p>{messages.query}</p>

                                      <a className={styles.sellerName}>
                                        {messages?.seller_name
                                          ? messages.seller_name
                                          : messages.admin_name}
                                      </a>
                                    </span>
                                    <span className={styles.chartTime}>
                                      {messages.sent_at}
                                    </span>
                                  </div>
                                )}
                              </React.Fragment>
                            ) : (
                              <></>
                            )}
                          </div>
                        );
                      })}
                  </div>
                  <div className={styles.chartMessageSendContainer}>
                    <Input.Group
                      compact
                      style={{ display: "flex", flexDirection: "row" }}
                    >
                      <Input
                        size="large"
                        placeholder="Write Your Message"
                        maxLength={160}
                        value={chartMessage}
                        onChange={(e) => setchartMessage(e.target.value)}
                        name="message"
                      />
                      <Button
                      disabled={disable}
                        type="primary"
                        onClick={() => {
                          sendMessage(chartMessage);
                        }}
                        size={"large"}
                      >
                        <RiSendPlaneFill style={{ fontSize: "1.5em" }} />
                      </Button>
                    </Input.Group>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  } else {
    return <Enquiries />;
  }
};

export default EditEnquiries;