import styles from "./SelectedBlockPanel.module.css";
import { ACTION_PRESETS, getPreset } from "./ClockTimeline/model";
import ExpressionInput from "./components/ExpressionInpux";
import { useClockStore } from "../store/useClockStore";
import { useMemo } from "react";
import Preset from "./components/Preset";
import Select from "./components/Select";

export default function SelectedBlockPanel() {
  const { selectedBlockIds, removeBlocks, blocks, updateBlock } = useClockStore();

  const blockId = useMemo(() => selectedBlockIds.keys().next().value, [selectedBlockIds]);
  const block = useMemo(() => {
    if (blockId) return blocks[blockId];
  }, [blockId]);

  if (selectedBlockIds.size > 1) {
    return (
      <div className={styles.wrap}>
        <span className={styles.multiLabel}>{selectedBlockIds.size} blocks selected</span>
        <button className={styles.removeBtn} onClick={() => removeBlocks(Array.from(selectedBlockIds))}>
          Remove all
        </button>
      </div>
    );
  }

  if (!blockId || !block) {
    return <div className={styles.empty}>Select a block on the timeline to edit it.</div>;
  }
  const preset = getPreset(block.presetId);

  return (
    <div className={styles.wrap}>
      <div className={styles.preview}>
        <Preset preset={preset} size={40} />
      </div>

      <div className={styles.fields}>
        <div className="field">
          <label>Action</label>
          <Select
            style={{ minWidth: 120 }}
            value={block.presetId}
            onChange={(e) => {
              const p = getPreset(e);
              updateBlock(blockId, { presetId: p.id, duration: p.ticks + 1 });
            }}
            options={ACTION_PRESETS.filter((p) => p.id !== "custom").map((p) => ({ ...p }))}
          />
        </div>
        <div className="field">
          <label>Start (tick)</label>
          <ExpressionInput value={block.start} min={0} onCommit={(v) => updateBlock(blockId, { start: v })} />
        </div>
        <div className="field">
          <label>Duration (ticks)</label>
          <ExpressionInput value={block.duration} min={1} onCommit={(v) => updateBlock(blockId, { duration: v })} />
        </div>
        <div className="field">
          <label>Count</label>
          <ExpressionInput value={block.count} min={1} onCommit={(v) => updateBlock(blockId, { count: v })} />
        </div>
        <div className="field">
          <label>Repeat ×</label>
          <ExpressionInput value={block.repeat ?? 1} min={1} onCommit={(v) => updateBlock(blockId, { repeat: v })} />
        </div>
      </div>

      <button className={styles.removeBtn} onClick={() => removeBlocks([blockId])}>
        Remove block
      </button>
    </div>
  );
}