'use client';

import clsx from 'clsx';

interface ActionTooltipProps {
  widgetData: {
    attributes: Record<string, any>;
    name: string;
    template: string;
    slug: string;
  };
  selectedWidget: any;
  designMode: boolean;
  onDelete?: () => void;
  onMoveUp?: () => void;
  onMoveDown?: () => void;
  onCopy?: () => void;
}

export function ActionTooltip({
  widgetData,
  selectedWidget,
  designMode,
  onDelete,
  onMoveUp,
  onMoveDown,
  onCopy
}: ActionTooltipProps) {
  if (!widgetData?.attributes) {
    return null;
  }

  const componentId = Object.keys(widgetData.attributes)[0];
  const attributes = widgetData.attributes[componentId];

  if (!attributes) {
    return null;
  }

  const isRootContainer = !attributes.parentId;

  if (isRootContainer) {
    return null;
  }

  const isContainer = ['container'].includes(attributes.type);
  const isCollectionItem = selectedWidget?.id?.includes('-');

  const isSelected = isCollectionItem
    ? selectedWidget?.id === componentId
    : selectedWidget?.id?.split('-')[0] === componentId?.split('-')[0];

  if (!designMode || !selectedWidget || !isSelected) {
    return null;
  }

  return (
    <section className="flex absolute justify-center right-[29px] mr-[4px] bottom-[-1px] z-[51] w-[73px] h-[21px] bg-[#292b2c] overflow-hidden gap-[9px]">
      <button
        className={clsx('bg-[#292b2c] text-white hover:opacity-80')}
        onClick={onMoveUp}
      >
        <svg
          width="9"
          height="9"
          viewBox="0 0 9 9"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3.94 2.33 2.557 3.715a.546.546 0 0 1-.771-.772L4.1.628a.546.546 0 0 1 .771 0l2.315 2.314a.546.546 0 0 1-.772.772L5.031 2.33v5.626a.546.546 0 0 1-1.09 0V2.33z"
            fill="#FFF"
            fillRule="evenodd"
          />
        </svg>
      </button>

      <button
        className={clsx(
          'bg-[#292b2c] text-white hover:opacity-80',
          isContainer && 'disabled'
        )}
        onClick={onMoveDown}
      >
        <svg
          width="9"
          height="9"
          viewBox="0 0 9 9"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3.697 6.64 2.314 5.257a.546.546 0 0 0-.771.771l2.314 2.315a.546.546 0 0 0 .772 0l2.314-2.315a.546.546 0 0 0-.772-.771L4.788 6.64V1.014a.546.546 0 0 0-1.09 0V6.64z"
            fill="#FFF"
            fillRule="evenodd"
          />
        </svg>
      </button>

      <button
        className="bg-[#292b2c] text-white hover:opacity-80"
        onClick={onDelete}
      >
        <svg
          width="8"
          height="8"
          viewBox="0 0 8 8"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6.8986356,1.49777209 L5.4463047,1.49777209 L5.4463047,1.089312 C5.4463047,0.499342458 4.94696224,0 4.3569927,0 L2.9046618,0 C2.31469226,0 1.8153498,0.499342458 1.8153498,1.089312 L1.8153498,1.49777209 L0.363018903,1.49777209 C0.181509452,1.49777209 0,1.63384035 0,1.86079099 C0,2.08774162 0.181509452,2.17836871 0.363018903,2.17836871 L0.771478991,2.17836871 L0.771478991,6.9438215 C0.771478991,7.53379103 1.27082145,7.98769231 1.86079099,7.98769231 L5.4914906,7.98769231 C6.08146013,7.98769231 6.53536141,7.48834985 6.53536141,6.9438215 L6.53536141,2.17836871 L6.9438215,2.17836871 C7.12533095,2.17836871 7.3068404,2.04230044 7.3068404,1.8153498 C7.3068404,1.58839917 7.07988976,1.49777209 6.89838031,1.49777209 L6.8986356,1.49777209 Z M2.5416429,1.089312 C2.5416429,0.862361361 2.72315235,0.680851909 2.95010299,0.680851909 L4.40243389,0.680851909 C4.62938452,0.680851909 4.81089397,0.862361361 4.81089397,1.089312 L4.81089397,1.49777209 L2.5416429,1.49777209 L2.5416429,1.089312 L2.5416429,1.089312 Z M5.8093236,6.8986356 C5.8093236,7.12558623 5.62781415,7.2616545 5.4463047,7.2616545 L1.81560509,7.2616545 C1.58865445,7.2616545 1.407145,7.08014505 1.407145,6.8986356 L1.407145,2.17862399 L5.8093236,2.17862399 L5.8093236,6.8986356 Z M2.9046618,3.31312189 C2.72315235,3.31312189 2.5416429,3.44919016 2.5416429,3.67614079 L2.5416429,5.8093236 C2.5416429,5.99083305 2.67771116,6.1723425 2.9046618,6.1723425 C3.13161244,6.1723425 3.2676807,6.03627424 3.2676807,5.8093236 L3.2676807,3.63095489 C3.2676807,3.44944544 3.08617125,3.31337718 2.9046618,3.31337718 L2.9046618,3.31312189 Z M4.3569927,3.31312189 C4.17548325,3.31312189 3.9939738,3.44919016 3.9939738,3.63069961 L3.9939738,5.80906831 C3.9939738,5.99057777 4.13004206,6.17208722 4.3569927,6.17208722 C4.58394334,6.17208722 4.7200116,6.03601895 4.7200116,5.80906831 L4.7200116,3.63069961 C4.67457042,3.44919016 4.53850215,3.31312189 4.3569927,3.31312189 Z"
            fill="#FFF"
            fillRule="evenodd"
          />
        </svg>
      </button>

      <button
        className="bg-[#292b2c] text-white hover:opacity-80"
        onClick={onCopy}
      >
        <svg
          width="8px"
          height="10px"
          viewBox="0 0 8 10"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g
            id="dynamic-widget"
            stroke="none"
            strokeWidth="1"
            fill="none"
            fillRule="evenodd"
          >
            <g
              id="dynamic-widget---02"
              transform="translate(-543, -615)"
              fill="#FFFFFF"
              fillRule="nonzero"
              stroke="#FFFFFF"
              strokeWidth="0.307692308"
            >
              <g id="Grou5" transform="translate(484, 610)">
                <g id="Group-5" transform="translate(59.6154, 6)">
                  <path
                    d="M4.35136402,1.39920627 L0.632480235,1.39920627 C0.283491141,1.39920627 0,1.68269742 0,2.03168651 L0,7.36751977 C0,7.71650886 0.283491141,8 0.632480235,8 L4.35136402,8 C4.70035311,8 4.98384425,7.71650886 4.98384425,7.36751977 L4.98384425,2.03168651 C4.98209431,1.68269742 4.69885316,1.39920627 4.35136402,1.39920627 Z M4.53985813,7.36576982 C4.53985813,7.47051655 4.45461079,7.55576388 4.34986407,7.55576388 L0.630980282,7.55576388 C0.526233555,7.55576388 0.440986219,7.47051655 0.440986219,7.36576982 L0.440986219,2.03143652 C0.440986219,1.92668979 0.526233555,1.84144245 0.630980282,1.84144245 L4.34986407,1.84144245 C4.45461079,1.84144245 4.53985813,1.92668979 4.53985813,2.03143652 L4.53985813,7.36576982 Z"
                    id="Shape"
                  ></path>
                  <path
                    d="M5.77331958,0 L2.0544358,0 C1.7054467,0 1.42195556,0.283491141 1.42195556,0.632480235 C1.42195556,0.755226399 1.52020249,0.853723321 1.64319865,0.853723321 C1.76619481,0.853723321 1.86444174,0.755476391 1.86444174,0.632480235 C1.86444174,0.527733508 1.94968907,0.442486172 2.0544358,0.442486172 L5.77331958,0.442486172 C5.87806631,0.442486172 5.96331365,0.527733508 5.96331365,0.632480235 L5.96331365,5.96831349 C5.96331365,6.07306022 5.87806631,6.15830755 5.77331958,6.15830755 C5.65057342,6.15830755 5.5520765,6.25655448 5.5520765,6.37955064 C5.5520765,6.5025468 5.65032343,6.60079373 5.77331958,6.60079373 C6.12230868,6.60079373 6.40579982,6.31730258 6.40579982,5.96831349 L6.40579982,0.632480235 C6.40579982,0.283491141 6.12230868,0 5.77331958,0 Z"
                    id="Path"
                  ></path>
                </g>
              </g>
            </g>
          </g>
        </svg>
      </button>
    </section>
  );
}