import {
  Timeline,
  TimelineItem,
  type TimelineItemState,
  type TimelineOrientation,
  type TimelineVariant,
} from "./Timeline";

type TimelineSpec = {
  height: number;
  id: string;
  rtl: boolean;
  variant: TimelineVariant;
  width: number;
  x: number;
  y: number;
};

type TimelineItemSpec = TimelineSpec & {
  orientation: TimelineOrientation;
  state: TimelineItemState;
};

const verticalTimelineSpecs: TimelineSpec[] = [
  { id: "572:6755", variant: "default", rtl: false, x: 225, y: 164, width: 600, height: 532 },
  { id: "584:11474", variant: "icon", rtl: false, x: 1163, y: 164, width: 600, height: 532 },
  { id: "573:6936", variant: "default", rtl: true, x: 225, y: 767, width: 600, height: 532 },
  { id: "584:11482", variant: "icon", rtl: true, x: 1163, y: 767, width: 600, height: 532 },
];

const horizontalTimelineSpecs: TimelineSpec[] = [
  { id: "584:4500", variant: "default", rtl: false, x: 274, y: 207, width: 1000, height: 128 },
  { id: "584:15619", variant: "icon", rtl: false, x: 274, y: 405, width: 1000, height: 136 },
  { id: "584:4581", variant: "default", rtl: true, x: 274, y: 770, width: 1000, height: 128 },
  { id: "584:15855", variant: "icon", rtl: true, x: 274, y: 968, width: 1000, height: 136 },
];

const verticalItemSpecs: TimelineItemSpec[] = [
  { id: "572:6443", orientation: "vertical", variant: "default", state: "finished", rtl: false, x: 150, y: 152, width: 500, height: 126 },
  { id: "584:10301", orientation: "vertical", variant: "icon", state: "finished", rtl: false, x: 790, y: 143, width: 500, height: 126 },
  { id: "572:6442", orientation: "vertical", variant: "default", state: "active", rtl: false, x: 150, y: 298, width: 500, height: 126 },
  { id: "584:10317", orientation: "vertical", variant: "icon", state: "active", rtl: false, x: 790, y: 289, width: 500, height: 126 },
  { id: "572:6441", orientation: "vertical", variant: "default", state: "inactive", rtl: false, x: 150, y: 461, width: 500, height: 126 },
  { id: "584:10333", orientation: "vertical", variant: "icon", state: "inactive", rtl: false, x: 790, y: 452, width: 500, height: 126 },
  { id: "572:6769", orientation: "vertical", variant: "default", state: "finished", rtl: true, x: 154, y: 758, width: 500, height: 126 },
  { id: "584:11212", orientation: "vertical", variant: "icon", state: "finished", rtl: true, x: 785, y: 758, width: 500, height: 126 },
  { id: "572:6785", orientation: "vertical", variant: "default", state: "active", rtl: true, x: 154, y: 908, width: 500, height: 126 },
  { id: "584:11228", orientation: "vertical", variant: "icon", state: "active", rtl: true, x: 785, y: 908, width: 500, height: 126 },
  { id: "572:6801", orientation: "vertical", variant: "default", state: "inactive", rtl: true, x: 154, y: 1058, width: 500, height: 126 },
  { id: "584:11244", orientation: "vertical", variant: "icon", state: "inactive", rtl: true, x: 785, y: 1058, width: 500, height: 126 },
];

const horizontalItemSpecs: TimelineItemSpec[] = [
  { id: "582:4215", orientation: "horizontal", variant: "default", state: "finished", rtl: false, x: 311, y: 168, width: 240, height: 128 },
  { id: "584:4325", orientation: "horizontal", variant: "default", state: "active", rtl: false, x: 595, y: 168, width: 240, height: 128 },
  { id: "584:4351", orientation: "horizontal", variant: "default", state: "inactive", rtl: false, x: 864, y: 168, width: 240, height: 128 },
  { id: "584:14794", orientation: "horizontal", variant: "icon", state: "finished", rtl: false, x: 311, y: 346, width: 240, height: 136 },
  { id: "584:14807", orientation: "horizontal", variant: "icon", state: "active", rtl: false, x: 595, y: 346, width: 240, height: 136 },
  { id: "584:14820", orientation: "horizontal", variant: "icon", state: "inactive", rtl: false, x: 864, y: 346, width: 240, height: 136 },
  { id: "582:4231", orientation: "horizontal", variant: "default", state: "finished", rtl: true, x: 854, y: 630, width: 240, height: 128 },
  { id: "584:4382", orientation: "horizontal", variant: "default", state: "active", rtl: true, x: 577, y: 630, width: 240, height: 128 },
  { id: "584:4408", orientation: "horizontal", variant: "default", state: "inactive", rtl: true, x: 311, y: 630, width: 240, height: 128 },
  { id: "584:14884", orientation: "horizontal", variant: "icon", state: "finished", rtl: true, x: 854, y: 804, width: 240, height: 136 },
  { id: "584:14897", orientation: "horizontal", variant: "icon", state: "active", rtl: true, x: 577, y: 804, width: 240, height: 136 },
  { id: "584:14910", orientation: "horizontal", variant: "icon", state: "inactive", rtl: true, x: 311, y: 804, width: 240, height: 136 },
];

function timelineSteps(count: number, rtl = false) {
  return Array.from({ length: count }, (_, index) => ({
    caption: rtl ? "\u062a\u0633\u0645\u064a\u0629" : "Caption",
    date: "Mar 15. 2050",
    id: `timeline-step-${index}`,
    label: rtl ? "\u0645\u0644\u0635\u0642" : "Label",
    state: "finished" as const,
  }));
}

function placement(spec: TimelineSpec) {
  return {
    height: spec.height,
    left: spec.x,
    top: spec.y,
    width: spec.width,
  };
}

export function TimelineShowcase() {
  return (
    <section className="timeline-showcase" aria-label="Figma Timeline component matrix">
      <div className="timeline-showcase__row">
        <div className="timeline-canvas timeline-canvas--vertical" data-node-id="572:6768">
          {verticalTimelineSpecs.map((spec) => (
            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
              <Timeline
                ariaLabel={`${spec.rtl ? "RTL" : "LTR"} ${spec.variant} vertical timeline`}
                dir={spec.rtl ? "rtl" : "ltr"}
                orientation="vertical"
                steps={timelineSteps(7, spec.rtl)}
                variant={spec.variant}
              />
            </div>
          ))}
        </div>

        <div className="timeline-canvas timeline-canvas--horizontal" data-node-id="584:4501">
          {horizontalTimelineSpecs.map((spec) => (
            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
              <Timeline
                ariaLabel={`${spec.rtl ? "RTL" : "LTR"} ${spec.variant} horizontal timeline`}
                dir={spec.rtl ? "rtl" : "ltr"}
                orientation="horizontal"
                steps={timelineSteps(6, spec.rtl)}
                variant={spec.variant}
              />
            </div>
          ))}
        </div>
      </div>

      <div className="timeline-showcase__row">
        <div className="timeline-canvas timeline-canvas--vertical-items" data-node-id="572:6444">
          {verticalItemSpecs.map((spec) => (
            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
              <TimelineItem
                caption={spec.rtl ? "\u062a\u0633\u0645\u064a\u0629" : "Caption"}
                date="Mar 15. 2050"
                dir={spec.rtl ? "rtl" : "ltr"}
                label={spec.rtl ? "\u0645\u0644\u0635\u0642" : "Label"}
                orientation="vertical"
                showBottomDate
                showTopDate
                state={spec.state}
                variant={spec.variant}
              />
            </div>
          ))}
        </div>

        <div className="timeline-canvas timeline-canvas--horizontal-items" data-node-id="582:4214">
          {horizontalItemSpecs.map((spec) => (
            <div className="timeline-canvas__item" data-node-id={spec.id} key={spec.id} style={placement(spec)}>
              <TimelineItem
                caption={spec.rtl ? "\u062a\u0633\u0645\u064a\u0629" : "Caption"}
                date="Mar 15. 2050"
                dir={spec.rtl ? "rtl" : "ltr"}
                label={spec.rtl ? "\u0645\u0644\u0635\u0642" : "Label"}
                orientation="horizontal"
                showTopDate
                state={spec.state}
                variant={spec.variant}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
