import React, { useState } from "react";
//import getImage from "../../../utils/getImage";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import queryKeys from "../../../services/queryKeys";
import { getTemplateConfig } from "../../../services/services";
//import {Link} from "react-router-dom";
//import siteLinks from "../../../links/siteLinks";
import UploadModal from "./UploadModal";

const TemplateConfigure = ({ productData }) => {
  const [selectedSectionDetails, setSelectedSectionDetails] = useState({});

  const {
    data: templateData,
    isFetching,
    isError,
    error,
  } = useQuery({
    queryKey: queryKeys.myTemplateConfig,
    queryFn: () => {
      let reqData = {
        token: localStorage.getItem("token"), // USER TOKEN
        uid: localStorage.getItem("uid"), // USER UID
        product_id: productData?.product_id,
      };
      return getTemplateConfig(reqData);
    },
    staleTime: 0,
  });

  const templateResponse = templateData?.data;
  const templateImages = Array.isArray(templateResponse?.template_images?.data)
    ? templateResponse.template_images.data
    : [];
  console.log("templateResponse", templateResponse);

  return (
    <>
      <div className="card card-statistics">
        {isFetching ? (
          <>
            <div className="row">
              <div className="col-12">
                <p className="text-mute">Loading...</p>
              </div>
            </div>
          </>
        ) : isError ? (
          <div className="row">
            <div className="col-12">
              <p className="text-danger">{error?.message}</p>
            </div>
          </div>
        ) : (
          <>
            <div className="card-header">
              <div className="card-heading">
                <h4 className="card-title" style={{ textTransform: "none" }}>
                  {templateResponse?.template_name}
                </h4>
              </div>
            </div>

            <div>
              <div className="col-12">
                <div>
                  <div>
                    <div>
                      <h4>Image List</h4>
                    </div>
                  </div>
                  <div>
                    <ul className="list-unstyled">
                      {templateImages &&
                        templateImages.map((item) => {
                          const currImage = item?.default_val;
                          return (
                            <li className="media">
                              <div
                                style={{
                                  display: "flex",
                                  flexDirection: "row",
                                  padding: "5px",
                                  backgroundColor: "aliceblue",
                                  margin: "2px",
                                  maxHeight: "150px",
                                }}
                              >
                                <div
                                  className="d-flex justify-content-center align-items-center"
                                  style={{
                                    padding: "6px",
                                    width: "120px",
                                    height: "100px",
                                  }}
                                >
                                  <img
                                    className="mb-xxs-0 img-fluid"
                                    style={{
                                      height: "auto",
                                      maxHeight: "100px",
                                    }}
                                    src={currImage}
                                    alt="image"
                                  />
                                </div>

                                <div
                                  className="media-body"
                                  style={{ padding: "2px" }}
                                >
                                  <div
                                    style={{
                                      display: "flex",
                                      flexDirection: "column",
                                    }}
                                  >
                                    <div
                                      style={{
                                        textAlign: "right",
                                        width: "100%",
                                      }}
                                    ></div>
                                    {/* [Change Image] */}
                                    <label
                                      onClick={() =>
                                        setSelectedSectionDetails(item)
                                      }
                                      className="w-100 text-end"
                                      data-bs-toggle="modal"
                                      data-bs-target="#verticalCenter"
                                      style={{ cursor: "pointer" }}
                                    >
                                      [Change Image]
                                    </label>
                                    {/* <input id={item?.id} name={item?.id} className="d-none form-control form-control-sm" type="file" onChange={handleFileChange}/> */}
                                    <div>
                                      <h5 className="mt-0 mb-1">
                                        {item?.name}
                                      </h5>
                                      {item?.description}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </li>
                          );
                        })}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </>
        )}{" "}
      </div>
      <UploadModal
        productId={productData?.product_id}
        selectedSectionDetails={selectedSectionDetails}
      />
    </>
  );
};

export default TemplateConfigure;