/**
 * BordersModal Component
 *
 * Modal for editing border settings including width, style, color, and radius.
 */

import * as Dialog from "@radix-ui/react-dialog";
import * as Select from "@radix-ui/react-select";
import * as Slider from "@radix-ui/react-slider";
import {Cross2Icon, ChevronDownIcon, CheckIcon} from "@radix-ui/react-icons";

import type {BorderSettings} from "@/types";

// Border styles
const BORDER_STYLES = [
  {value: "solid", label: "Solid"},
  {value: "dashed", label: "Dashed"},
  {value: "dotted", label: "Dotted"},
];

interface BordersModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  border: BorderSettings;
  onUpdate: (border: BorderSettings) => void;
}

export function BordersModal({
  open,
  onOpenChange,
  border,
  onUpdate,
}: BordersModalProps) {
  const handleChange = <K extends keyof BorderSettings>(
    key: K,
    value: BorderSettings[K]
  ) => {
    onUpdate({...border, [key]: value});
  };

  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="modal-overlay" />
        <Dialog.Content className="modal-content">
          <div className="modal-header">
            <Dialog.Title className="modal-title">Border Settings</Dialog.Title>
            <Dialog.Close asChild>
              <button className="modal-close" aria-label="Close">
                <Cross2Icon />
              </button>
            </Dialog.Close>
          </div>

          <div className="modal-body">
            {/* Border Width */}
            <div className="modal-field">
              <label className="modal-label">
                Border Width: {border.width}px
              </label>
              <Slider.Root
                className="slider-root"
                value={[border.width]}
                onValueChange={([value]) => handleChange("width", value)}
                min={0}
                max={20}
                step={1}
              >
                <Slider.Track className="slider-track">
                  <Slider.Range className="slider-range" />
                </Slider.Track>
                <Slider.Thumb className="slider-thumb" />
              </Slider.Root>
            </div>

            {/* Border Style */}
            <div className="modal-field">
              <label className="modal-label">Border Style</label>
              <Select.Root
                value={border.style}
                onValueChange={(value) =>
                  handleChange("style", value as BorderSettings["style"])
                }
              >
                <Select.Trigger className="select-trigger">
                  <Select.Value />
                  <Select.Icon>
                    <ChevronDownIcon />
                  </Select.Icon>
                </Select.Trigger>
                <Select.Portal>
                  <Select.Content className="select-content">
                    <Select.Viewport>
                      {BORDER_STYLES.map((style) => (
                        <Select.Item
                          key={style.value}
                          value={style.value}
                          className="select-item"
                        >
                          <Select.ItemText>{style.label}</Select.ItemText>
                          <Select.ItemIndicator className="select-item-indicator">
                            <CheckIcon />
                          </Select.ItemIndicator>
                        </Select.Item>
                      ))}
                    </Select.Viewport>
                  </Select.Content>
                </Select.Portal>
              </Select.Root>
            </div>

            {/* Border Color */}
            <div className="modal-field">
              <label className="modal-label">Border Color</label>
              <div className="settings-color-input">
                <input
                  type="color"
                  className="settings-color-picker"
                  value={border.color}
                  onChange={(e) => handleChange("color", e.target.value)}
                />
                <input
                  type="text"
                  className="settings-input flex-1"
                  value={border.color}
                  onChange={(e) => handleChange("color", e.target.value)}
                />
              </div>
            </div>

            {/* Border Radius */}
            <div className="modal-field">
              <label className="modal-label">
                Border Radius: {border.radius}px
              </label>
              <Slider.Root
                className="slider-root"
                value={[border.radius]}
                onValueChange={([value]) => handleChange("radius", value)}
                min={0}
                max={50}
                step={1}
              >
                <Slider.Track className="slider-track">
                  <Slider.Range className="slider-range" />
                </Slider.Track>
                <Slider.Thumb className="slider-thumb" />
              </Slider.Root>
            </div>
          </div>

          <div className="modal-footer">
            <Dialog.Close asChild>
              <button className="oppb-button-secondary">Close</button>
            </Dialog.Close>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default BordersModal;
