import React from "react";
import { InfoIcon } from "../../../components/icons/ShortcutIcons";
import { SaveDiskIcon } from "../../../components/icons/ExportCommonIcons";
import { useCompareStore } from "../../../store/builder/store";
import OuterClick from "../../../utils/outerClick";

const ComparePopUp = () => {
  const { setComparePopUp } = useCompareStore();

  OuterClick({
    contextClassName: ["compare-wrapper", "input"],
    setMenuVisible: () => setComparePopUp(false),
  });

  return (
    <div className="compare-container">
      <div className="compare-wrapper">
        <div className="grid-wrapper">
          <div className="header">
            Do you want to save this version before comparing?
          </div>

          <div className="cards-container">
            <div className="card"></div>
            <div className="card"></div>

            <div className="card-layout-wrapper">
              <div className="card-layout-container">
                <div className="tab-header">
                  <div className="label-tab">Layout !</div>
                  <div className="status"></div>
                </div>
                <div className="icon">
                  <SaveDiskIcon />
                </div>
                <div className="skeleton-wrapper">
                  <div className="skeleton"></div>
                  <div className="skeleton"></div>
                  <div className="skeleton"></div>
                </div>
              </div>
            </div>

            <div className="card"></div>
            <div className="card"></div>
          </div>

          <div className="button-wrapper">
            <div className="button-group">
              <div className="save btn">Save & Continue</div>
              <div className="replace btn">Replace Existing Version</div>
            </div>
            <button
              className="cancel btn"
              id="compare-cancel-btn"
              onClick={() => setComparePopUp(false)}
            >
              Cancel
            </button>
          </div>
        </div>

        <div className="footer">
          <InfoIcon /> Save this version and proceed.
        </div>
      </div>
    </div>
  );
};

export default ComparePopUp;