import type { Meta, StoryObj } from "@storybook/react";

import { Button } from "@/components/ui/button/button";
import { ThemeProviderDecorators } from "@/storybook/Decorator";

import {
  EarlyBookingDiscount,
  HotelDiscountPrice,
  HotelPrice,
  HotelRezervationSummary,
  HotelRezervationSummaryDateInfo,
  HotelRezervationSummaryRoomInfo,
  RezervationSummaryDivider,
  RezervationSummaryFlightInfo,
  RezervationSummaryFlightPrice,
  RezervationSummaryFlightTotalPrice,
  RezervationSummaryProvider,
  RezervationSummaryRoomInfo,
  RezervationSummaryRoomProperty,
  RezervationSummaryTitle,
  RezervationSummaryTotalPrice,
} from "./rezervation-summary";

const meta = {
  title: "Widgets/RezervationSummary",
  component: RezervationSummaryProvider,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
} satisfies Meta<typeof RezervationSummaryProvider>;

export default meta;

type Story = StoryObj<typeof RezervationSummaryProvider>;

const priceDescription = [
  {
    description: "Uçuş Bedeli",
    price: "19.500TL",
  },
  {
    description: "Servis Bedeli",
    price: "5,00TL",
  },
  {
    description: "Vergi",
    price: "300,00TL",
  },
];

export const EmptyRezervationSummary: Story = {
  render: () => {
    return (
      <div className="max-w-[248px]">
        <RezervationSummaryProvider>
          <span className="text-sm text-gray-800">
            Rezervasyon yapmak için önce bir oda seçmelisiniz.
          </span>
          <Button isDisabled>Talep Oluştur</Button>
        </RezervationSummaryProvider>
      </div>
    );
  },
};

export const DefaultRezervationSummary: Story = {
  render: () => {
    return (
      <div className="max-w-[248px]">
        <RezervationSummaryProvider>
          <RezervationSummaryTitle title="Rezervasyon Özeti">
            <Button
              className="!h-auto !p-0"
              leftIcon={{ name: "Maximize2", size: 20 }}
            />
          </RezervationSummaryTitle>
          <RezervationSummaryDivider />
          <RezervationSummaryRoomInfo hotelName="Gordion Oteli">
            <RezervationSummaryRoomProperty icon={{ name: "UtensilsCrossed" }}>
              Ultra herşey dahil
            </RezervationSummaryRoomProperty>
            <RezervationSummaryRoomProperty icon={{ name: "User" }}>
              2 yetişkin
            </RezervationSummaryRoomProperty>
          </RezervationSummaryRoomInfo>
          <RezervationSummaryDivider />
          <RezervationSummaryTotalPrice price="16500TRY" />
          <Button variant="primary">Talep Oluştur</Button>
        </RezervationSummaryProvider>
      </div>
    );
  },
};

export const SummaryRezervationSummary: Story = {
  render: () => {
    return (
      <div className="max-w-[336px]">
        <RezervationSummaryProvider>
          <RezervationSummaryTitle title="Rezervasyon Özeti" />
          <HotelRezervationSummary
            hotelLocation="Antalya / Belek"
            hotelName="Caresse Luxury Collection Resort & Spa"
            image="https://images.pexels.com/photos/12823580/pexels-photo-12823580.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          >
            <RezervationSummaryDivider />
            <HotelRezervationSummaryDateInfo
              startDate="1 Eylül 2023"
              startTime="14:00"
              endDate="1 Eylül 2023"
              endTime="14:00"
              nightlyRateDescription="9 Gece"
            />
            <RezervationSummaryDivider />
            <HotelRezervationSummaryRoomInfo
              title="1. Deluxe King Room, 1 King Bed, Sea view, Balcony"
              passengerDescription="2 yetişkin"
              mealDescription="Ultra herşey dahil"
            >
              <HotelPrice
                nightlyRateDescription="9 Gece"
                discount
                discountDescription="%30 İndirim"
                price="7500TL"
              />
              <HotelDiscountPrice price="6200TL" />
            </HotelRezervationSummaryRoomInfo>
            <RezervationSummaryDivider />
          </HotelRezervationSummary>
          <EarlyBookingDiscount price="600TL" title="Erken Rezervasyon" />
          <RezervationSummaryTotalPrice price="7800TL" />
          <Button variant="primary">Talep Oluştur</Button>
        </RezervationSummaryProvider>
      </div>
    );
  },
};

export const FlightSummaryRezervationSummary: Story = {
  render: () => {
    return (
      <div className="max-w-[336px]">
        <RezervationSummaryProvider>
          <RezervationSummaryTitle title="Tek Yön" />
          <RezervationSummaryDivider />
          <RezervationSummaryFlightInfo
            destination="İstanbul(SAW)"
            origin="İzmir(ABD)"
            date="18 Ara 2023 Cu"
            time="21:00 - 22:05"
            flightTime="1sa 5dk"
            operatingAirline="Turkish Airlines"
            flightNumber="TK7520"
          >
            <Button className="!p-0 !text-sm !font-medium" variant="link">
              Detay
            </Button>
          </RezervationSummaryFlightInfo>
          <RezervationSummaryDivider />
          <RezervationSummaryFlightPrice priceDescription={priceDescription} />
          <RezervationSummaryFlightTotalPrice price="19.805TL" />
          <Button variant="primary">Talep Oluştur</Button>
        </RezervationSummaryProvider>
      </div>
    );
  },
};