import React, { useState } from "react";
import FilePicker from "../../../../../components/FilePicker/FilePicker";
import { ArrowDown, ArrowUp } from "../../../../../components/icons/arrow";
import TODInput from "../../../../../components/inputs/TOD.Input";
import TODTextArea from "../../../../../components/inputs/TOD.TextArea";
import WBDrawer from "../../../../../components/WBDrawer";
import WBSpacer from "../../../../../components/WBSpacer";
import { generatePreview } from "../../../../../features/navigation/components/TOD.Navigation.js";

const ServicesItem = ({
  moveServiceUp,
  moveServiceDown,
  categoryIndex,
  serviceIndex,
  category,
  service,
  updateService,
  deleteService,
}) => {
  const [deleteServicePopoverOpen, setDeleteServicePopoverOpen] =
    useState(false);
  const [drawerOpen, setDrawerOpen] = useState(false);

  const TrashIcon = () => (
    <svg
      width="11"
      height="12"
      viewBox="0 0 11 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clipPath="url(#clip0_47_278)">
        <path
          d="M4.34844 1.125H6.64911C6.7154 1.125 6.77679 1.15547 6.81362 1.20937L7.28013 1.875H3.71987L4.18638 1.20937C4.22321 1.15781 4.2846 1.125 4.35089 1.125H4.34844ZM8.69688 1.875L7.79576 0.583594C7.5404 0.220312 7.11071 0 6.65156 0H4.34844C3.88929 0 3.4596 0.220312 3.20424 0.583594L2.30313 1.875H1.96674H0.785714H0.589286C0.262723 1.875 0 2.12578 0 2.4375C0 2.74922 0.262723 3 0.589286 3H0.874107L1.46339 10.6102C1.52478 11.393 2.20737 12 3.02991 12H7.96763C8.79018 12 9.47277 11.393 9.53415 10.6102L10.1259 3H10.4107C10.7373 3 11 2.74922 11 2.4375C11 2.12578 10.7373 1.875 10.4107 1.875H10.2143H9.03326H8.69688ZM8.94487 3L8.36049 10.5281C8.34576 10.725 8.17388 10.875 7.96763 10.875H3.02991C2.82366 10.875 2.65424 10.7227 2.63705 10.5281L2.05513 3H8.94487Z"
          fill="black"
        />
      </g>
      <defs>
        <clipPath id="clip0_47_278">
          <rect width="11" height="12" fill="white" />
        </clipPath>
      </defs>
    </svg>
  );

  return (
    <div className="service-item-container">
      <div className="service-order-buttons">
        <button
          onClick={() => moveServiceUp(categoryIndex, serviceIndex)}
          disabled={serviceIndex === 0}
        >
          <ArrowUp />
        </button>
        <button
          onClick={() => moveServiceDown(categoryIndex, serviceIndex)}
          disabled={serviceIndex === category.services.length - 1}
        >
          <ArrowDown />
        </button>
      </div>
      <div key={serviceIndex} className="service-item">
        <div className="service-item-header">
          <div className="service-item-header-left">
            <h3 className="service-title">{service.title || "New service"}</h3>
            <div
              className="edit-section-button"
              onClick={() => setDrawerOpen(true)}
            >
              Edit service content
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path d="M36.4 360.9L13.4 439 1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1L73 498.6l78.1-23c12.4-3.6 23.7-9.9 33.4-18.4c1.4-1.2 2.7-2.5 4-3.8L492.7 149.3c21.9-21.9 24.6-55.6 8.2-80.5c-2.3-3.5-5.1-6.9-8.2-10L453.3 19.3c-25-25-65.5-25-90.5 0L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4zm46 13.5c1.7-5.6 4.5-10.8 8.4-15.2c.6-.6 1.1-1.2 1.7-1.8L321 129 383 191 154.6 419.5c-4.7 4.7-10.6 8.2-17 10.1l-23.4 6.9L59.4 452.6l16.1-54.8 6.9-23.4z" />
              </svg>
            </div>
            <a
              className="wb-form-btn preview-btn invert active"
              onClick={() =>
                generatePreview(
                  service.title
                    ? "/services/" +
                        service.title
                          .toLowerCase()
                          .replace(/[^\w- ]+/g, "")
                          .replace(/ +/g, "-")
                    : ""
                )
              }
            >
              Preview service
              <svg
                xmlns="http://www.w3.org/2000/svg"
                height="1em"
                viewBox="0 0 576 512"
              >
                <path d="M129.1 361.4C93.6 327.2 67.7 286.9 52.5 256c15.1-30.9 41-71.2 76.6-105.4C171.8 109.5 224.9 80 288 80s116.2 29.5 158.9 70.6c35.6 34.3 61.5 74.5 76.6 105.4c-15.1 30.9-41 71.2-76.6 105.4C404.2 402.5 351.1 432 288 432s-116.2-29.5-158.9-70.6zM288 480c158.4 0 258-149.3 288-224C546 181.3 446.4 32 288 32S30 181.3 0 256c30 74.7 129.6 224 288 224zm0-144c-44.2 0-80-35.8-80-80c0-5.4 .5-10.6 1.5-15.7L288 256l-15.7-78.5c5.1-1 10.3-1.5 15.7-1.5c44.2 0 80 35.8 80 80s-35.8 80-80 80zM160 256c0 70.7 57.3 128 128 128s128-57.3 128-128s-57.3-128-128-128c-8.6 0-17 .8-25.1 2.5c-50.3 10-90 49.5-100.3 99.7l-.1 .7c-1.6 8.1-2.5 16.5-2.5 25.1z" />
              </svg>
            </a>
          </div>
          <div className="service-tools">
            <div className="delete-button-popover">
              {deleteServicePopoverOpen && (
                <div className="delete-button-popover-content">
                  Delete service?
                  <a
                    onClick={() => {
                      deleteService(categoryIndex, serviceIndex);
                      setDeleteServicePopoverOpen(false);
                    }}
                  >
                    Yes
                  </a>
                </div>
              )}
              <button
                onClick={() => {
                  setDeleteServicePopoverOpen(true);
                  setTimeout(() => {
                    setDeleteServicePopoverOpen(false);
                  }, 3000);
                }}
                className="tool-button delete-button"
                title="Delete service"
              >
                <TrashIcon />
              </button>
            </div>
            <WBDrawer
              isOpen={drawerOpen}
              onClose={() => setDrawerOpen(false)}
              title="Create service page content"
              image="https://themesondemand.b-cdn.net/MioCommerce/Olympus/services-screenshot.png"
              previewSlug={
                service.title
                  ? "/services/" +
                    service.title
                      .toLowerCase()
                      .replace(/[^\w- ]+/g, "")
                      .replace(/ +/g, "-")
                  : ""
              }
              previewTitle="Preview Service"
            >
              <div className="service-content">
                <h4>
                  This content will be visible on the dedicated information page
                  for this service.
                </h4>
                <p>
                  Provide specific information about your service: its title, a
                  short (few paragraphs) description of what this service
                  includes and why customers should book it and images that will
                  be used on the dedicated information page about this service.
                </p>
                <WBSpacer />
                <TODInput
                  label="Service Title"
                  value={service.title}
                  onChange={(value) =>
                    updateService(categoryIndex, serviceIndex, "title", value)
                  }
                  placeholder="Enter service title"
                />
                <WBSpacer />
                <TODTextArea
                  label="Service Description"
                  value={service.description}
                  onChange={(e) =>
                    updateService(
                      categoryIndex,
                      serviceIndex,
                      "description",
                      e.target.value
                    )
                  }
                />
                <WBSpacer />
                <TODInput
                  label="Service Call To Action Text"
                  value={service.ctaText}
                  onChange={(value) =>
                    updateService(categoryIndex, serviceIndex, "ctaText", value)
                  }
                  placeholder="Enter CTA Text"
                />
                <WBSpacer />
                <div className="form-group">
                  <label className="form-label">Main image</label>
                  <FilePicker
                    value={service.mainImage}
                    setValue={(value) =>
                      updateService(
                        categoryIndex,
                        serviceIndex,
                        "mainImage",
                        value
                      )
                    }
                    label={{
                      choose: "Choose main image",
                      change: "Change main image",
                      current: "Current main image",
                      cancel: "Cancel",
                      dragText: "Drag and drop your image here",
                      orText: "or",
                      uploading: "Uploading...",
                    }}
                  />
                </div>
                <WBSpacer height={50} />
                <div className="form-group">
                  <label className="form-label">Additional images</label>
                  {service.images.map((image, imageIndex) => (
                    <div key={imageIndex} className="additional-image">
                      <FilePicker
                        value={image}
                        setValue={(value) => {
                          const newImages = [...service.images];
                          newImages[imageIndex] = value;
                          updateService(
                            categoryIndex,
                            serviceIndex,
                            "images",
                            newImages
                          );
                        }}
                        label={{
                          choose: "Choose image",
                          change: "Change image",
                          current: "Current image",
                          cancel: "Cancel",
                          dragText: "Drag and drop your image here",
                          orText: "or",
                          uploading: "Uploading...",
                        }}
                      />
                      <button
                        onClick={() => {
                          const newImages = service.images.filter(
                            (_, i) => i !== imageIndex
                          );
                          updateService(
                            categoryIndex,
                            serviceIndex,
                            "images",
                            newImages
                          );
                        }}
                        className="delete-button"
                        title="Delete image"
                      >
                        <TrashIcon />
                      </button>
                    </div>
                  ))}
                  <button
                    onClick={() => {
                      const newImages = [
                        ...service.images,
                        {
                          url: "",
                          attachment_id: null,
                        },
                      ];
                      updateService(
                        categoryIndex,
                        serviceIndex,
                        "images",
                        newImages
                      );
                    }}
                    className="add-image-button"
                    style={{ marginLeft: "auto" }}
                  >
                    Add image
                  </button>
                </div>
              </div>
            </WBDrawer>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ServicesItem;
