import React from "react";
import { ChoiceGroup, ChoiceOption } from "../components/ChoiceGroup";
import { ColorPicker } from "../components/ColorPicker";
import { HighlightableField } from "../components/HighlightableField";
import { RangeSlider } from "../components/RangeSlider";
import { Toggle } from "../components/Toggle";
import type { BaseTabProps } from "../tabs/types";
import type { Settings } from "../types";

type ChipsExtrasSlotProps = BaseTabProps;

const DROPDOWN_BORDER_TYPE_OPTIONS = [
  { value: "solid", label: "Solid" },
  { value: "dashed", label: "Dashed" },
  { value: "dotted", label: "Dotted" },
  { value: "double", label: "Double" },
] as const;

function BorderTypeIcon({
  type,
}: {
  type: "solid" | "dashed" | "dotted" | "double";
}) {
  const dashMap: Record<"solid" | "dashed" | "dotted", string | undefined> = {
    solid: undefined,
    dashed: "6 4",
    dotted: "1 4",
  };

  const dashArray = type === "double" ? undefined : dashMap[type];
  const lineCap = type === "dotted" ? "round" : "butt";

  return (
    <svg className="bwvs:w-12 bwvs:h-10" viewBox="0 0 48 40" fill="none">
      <rect
        x="6"
        y="7"
        width="36"
        height="26"
        rx="3"
        fill="#f3f4f6"
        stroke="#d1d5db"
      />

      {type === "double" ? (
        <>
          <rect
            x="12"
            y="10"
            width="24"
            height="20"
            rx="2"
            fill="none"
            stroke="#9ca3af"
          />
          <rect
            x="14"
            y="12"
            width="20"
            height="16"
            rx="2"
            fill="none"
            stroke="#9ca3af"
          />
        </>
      ) : (
        <rect
          x="12"
          y="10"
          width="24"
          height="20"
          rx="2"
          fill="none"
          stroke="#9ca3af"
          strokeDasharray={dashArray}
          strokeLinecap={lineCap}
        />
      )}
    </svg>
  );
}

export function ChipsTabExtras({
  settings,
  setSettings,
}: ChipsExtrasSlotProps): React.ReactElement | null {
  return (
    <HighlightableField id="chips-background-color">
      <div className="bwvs:legacy-space-y-6 bwvs:legacy-border bwvs:border-gray-200 bwvs:rounded-lg bwvs:p-6">
        <Toggle
          checked={settings.enable_dropdown_bg !== false}
          onChange={(checked) =>
            setSettings({ ...settings, enable_dropdown_bg: checked })
          }
          label="Container Background"
          description="Show a background and border behind the swatch options."
        />

        {settings.enable_dropdown_bg !== false ? (
          <div className="bwvs:legacy-space-y-6 bwvs:pt-4 bwvs:legacy-border-t bwvs:border-gray-200">
            <div className="bwvs:grid bwvs:grid-cols-1 bwvs:md:grid-cols-2 bwvs:gap-6">
              <ColorPicker
                label="Background Color"
                value={settings.dropdown_bg_color || "#ffffff"}
                onChange={(value) =>
                  setSettings({ ...settings, dropdown_bg_color: value })
                }
              />

              <ColorPicker
                label="Border Color"
                value={settings.dropdown_border_color || "#e5e7eb"}
                onChange={(value) =>
                  setSettings({ ...settings, dropdown_border_color: value })
                }
              />
            </div>

            <RangeSlider
              label="Corner Radius"
              value={settings.dropdown_bg_border_radius ?? 8}
              min={0}
              max={50}
              unit="px"
              onChange={(val) =>
                setSettings({ ...settings, dropdown_bg_border_radius: val })
              }
            />

            <RangeSlider
              label="Border Width"
              value={settings.dropdown_border_width ?? 1}
              min={0}
              max={20}
              unit="px"
              onChange={(val) =>
                setSettings({ ...settings, dropdown_border_width: val })
              }
            />

            <div>
              <label className="bwvs:block bwvs:text-sm bwvs:font-medium bwvs:text-gray-700 bwvs:mb-2">
                Border Type
              </label>
              <ChoiceGroup
                label="Border Type"
                value={settings.dropdown_border_type || "solid"}
                optionValues={DROPDOWN_BORDER_TYPE_OPTIONS.map((o) => o.value)}
                onChange={(next) =>
                  setSettings({
                    ...settings,
                    dropdown_border_type:
                      next as Settings["dropdown_border_type"],
                  })
                }
                className="b3-wvs-choice-grid b3-wvs-choice-grid--compact"
              >
                {DROPDOWN_BORDER_TYPE_OPTIONS.map((opt) => {
                  const selected =
                    (settings.dropdown_border_type || "solid") === opt.value;

                  return (
                    <ChoiceOption
                      key={opt.value}
                      value={opt.value}
                      className={`bwvs:p-4 bwvs:legacy-border bwvs:rounded-lg bwvs:text-center bwvs:transition-all ${
                        selected
                          ? "bwvs:border-blue-500 bwvs:bg-blue-50 bwvs:ring-2 bwvs:ring-blue-200"
                          : "bwvs:border-gray-200 bwvs:hover:border-gray-300 bwvs:hover:bg-gray-50"
                      }`}
                    >
                      <div className="bwvs:flex bwvs:justify-center bwvs:mb-2">
                        <BorderTypeIcon type={opt.value} />
                      </div>
                      <div className="bwvs:text-sm bwvs:font-medium">
                        {opt.label}
                      </div>
                    </ChoiceOption>
                  );
                })}
              </ChoiceGroup>
            </div>
          </div>
        ) : null}
      </div>
    </HighlightableField>
  );
}