import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import {
  FlightBrand,
  FlightCard,
  FlightDetail,
  FlightDetailAction,
  FlightDetailCard,
  FlightInformation,
  FlightPrice,
  FlightTime,
} from "./flight-card";

const meta = {
  title: "Widgets/FligtCard",
  component: FlightCard,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
  parameters: {
    // 👇 The viewports object from the Essentials addon
    viewport: {
      // 👇 The viewports you want to use
      viewports: INITIAL_VIEWPORTS,
      // 👇 Your own default viewport
    },
  },
} satisfies Meta<typeof FlightCard>;

export default meta;

type Story = StoryObj<typeof FlightCard>;

const properties = [
  {
    text: "1 Parça Kabin Bagajı",
  },
  {
    text: "1 Parça Kabin Bagajı",
  },
  {
    text: "1 Parça Kabin Bagajı",
  },
  {
    text: "1 Parça Kabin Bagajı",
  },
  {
    text: "1 Parça Kabin Bagajı",
  },
];

export const DefaultFlightCard: Story = {
  render: () => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [showDetail, SetShowDetail] = useState<boolean>(false);
    return (
      <div className="max-w-[776px]">
        <FlightCard>
          <div className="flex justify-between">
            <FlightBrand
              logoSrc="https://seeklogo.com/images/T/turkish-airlines-logo-25BACC2D0C-seeklogo.com.png"
              brandName="Turkish Airlines"
              flightCode="TK283623"
            />
            <FlightTime
              totalFlightHours="2sa 15dk"
              flightStartTime="22:05"
              endStartTime="00:05"
              transferInformation="2 Aktarma"
              startIATACode="SAW"
              endIATACode="BUD"
              transferIATACodes="ABD,DER"
            />
            <FlightInformation
              seatInformation="Son iki Koltuk!"
              baggageInformation="15 Kg"
              flightClass="Ekonomi"
            />
            <FlightPrice price="2.781,68 TL" isOptimal />
          </div>
          <div className="flex flex-col gap-6">
            <FlightDetailAction
              infoText="Uçuş hizmetinizin bir bölümü Anadolu Jet tarafından yürütülecektir."
              onClick={() => SetShowDetail(!showDetail)}
              isOpen={showDetail}
            />
            <FlightDetail active={showDetail}>
              {Array.from({ length: 5 }).map((_, i) => (
                <FlightDetailCard
                  key={+i}
                  flightClass="Economy (B)"
                  price="1500TL"
                  properties={properties}
                />
              ))}
            </FlightDetail>
          </div>
        </FlightCard>
      </div>
    );
  },
};