/* eslint-disable @next/next/no-img-element */
/* eslint-disable jsx-a11y/control-has-associated-label */
import Image from "next/image";
import type { PropsWithChildren } from "react";
import React, { createElement, Fragment } from "react";
import { useWindowSize } from "usehooks-ts";

import { Badge } from "@/components/ui/badge/badge";
import type { ButtonProps } from "@/components/ui/button/button";
import { Button } from "@/components/ui/button/button";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { Tooltip } from "@/components/ui/tooltip/tooltip";
import type { ITransferListItem } from "@/features/modules/transfer/list/types/transfer-list.types";
import { cn } from "@/libs/utils";
import DefautlImage from "@/public/assets/images/defaultImage.jpg";

interface TransferPriceProps {
  price: string;
  discountedPrice?: string;
  isOptimal?: boolean;
}

interface TransferDetailActionProps {
  onClick: () => void;
  buttonVariant?: ButtonProps["variant"];
  buttonText?: string;
  isLoading?: boolean;
}

interface TransferInformationProps {
  transferName: string;
  maxPerson: string;
  time: string;
  isCompact?: boolean;
}

export interface TransferBrandProps {
  logoSrc?: string;
}

export interface TransferCardProps
  extends PropsWithChildren,
    React.HTMLAttributes<HTMLDivElement> {}

const TransferCard = ({ children, ...props }: TransferCardProps) => {
  return (
    <div
      className="flex h-auto w-full flex-col overflow-hidden rounded-primary border bg-white hover:ring md:p-4"
      {...props}
    >
      {children}
    </div>
  );
};

const TransferBrand = (props: { imageUrl: string }) => {
  return (
    <div className="flex w-[128px] shrink-0 gap-2 p-4 md:basis-[128px]">
      {props.imageUrl ? (
        <img
          className="mt-4 object-cover md:mt-0 md:h-[90px] md:w-[128px] md:object-contain"
          src={props.imageUrl}
          alt={props.imageUrl}
        />
      ) : (
        <Image
          className="md:h-[90px] md:w-[128px]"
          src={props.imageUrl ?? DefautlImage}
          alt=""
        />
      )}
    </div>
  );
};

const TransferInformation = ({
  transferName,
  maxPerson,
  time,
  isCompact,
}: TransferInformationProps) => {
  return (
    <div
      className={cn("flex grow flex-col gap-4 px-4 md:p-0", {
        "!gap-2": isCompact,
      })}
    >
      <span
        className={cn("text-xl font-semibold text-gray-800 line-clamp-2", {
          "!text-base": isCompact,
        })}
      >
        {transferName}
      </span>
      <div className="flex items-center gap-8">
        <div className="flex items-center gap-1">
          <LIcon size="16" name="Users" />
          <span className="text-sm text-gray-800">{maxPerson}</span>
        </div>

        <div className="flex items-center gap-1">
          <Tooltip
            position="bottom"
            label=" Belirtilen saatler arasında hizmet vermektedir. "
          >
            <button type="button">
              <LIcon size="16" name="Clock" />
            </button>
          </Tooltip>
          <span className="text-sm text-gray-800">{time}</span>
        </div>
      </div>
    </div>
  );
};

const TransferPrice = ({
  price,
  discountedPrice,
  isOptimal,
}: TransferPriceProps) => {
  return (
    <div className="flex shrink-0 flex-col gap-2">
      {isOptimal && <Badge variant="success">En uygun fiyat</Badge>}
      <div className="flex flex-col items-end">
        <span className="text-xs text-[#667085] line-through ">
          {discountedPrice}
        </span>
        <span className="font-semibold text-gray-800">{price}</span>
        <span className="text-xs text-gray-500">Toplam Fiyat</span>
      </div>
    </div>
  );
};

const TransferAction = ({
  onClick,
  buttonVariant,
  buttonText,
  isLoading,
}: TransferDetailActionProps) => {
  return (
    <Button
      type="button"
      onClick={onClick}
      variant={buttonVariant || "primary"}
      className="min-w-[105px]"
      loading={isLoading}
    >
      {buttonText || "Seç"}
    </Button>
  );
};

export interface TransferListItemProps {
  onClick?: VoidFunction;
  item: ITransferListItem;
  isCompact?: boolean;
  noWrappedCard?: boolean;
  isLoading?: boolean;
}

const TransferListItemCard = ({ item, ...props }: TransferListItemProps) => {
  const windowSize = useWindowSize();
  const isDesktop = windowSize.width > 640;

  const content = (
    <div className="flex flex-col items-center justify-between gap-2 md:flex-row">
      <div className="flex flex-col items-center gap-8 pb-4 md:flex-row md:pb-0">
        <TransferBrand imageUrl={item.imageUrl} />
        <TransferInformation
          isCompact={props.isCompact}
          maxPerson={`Maks. ${item.maxPassengerCount}`}
          time={`${item.startTimeFormated} / ${item.endTimeFormated}`}
          transferName={item.title}
        />
      </div>
      {!isDesktop && <div className="h-px w-full border-t border-gray-200" />}
      <div className="flex w-full shrink-0 flex-col items-end gap-4 p-4 md:w-auto md:flex-row md:items-center md:p-1">
        <TransferPrice
          discountedPrice=""
          price={item.priceFormated}
          isOptimal={item.hasBestPriceBadge}
        />
        {!!props.onClick && (
          <TransferAction
            isLoading={props.isLoading}
            onClick={() => {
              // eslint-disable-next-line no-console
              props.onClick?.();
            }}
          />
        )}
      </div>
    </div>
  );

  return props.noWrappedCard
    ? createElement(Fragment, {}, content)
    : createElement(
        TransferCard,
        {
          onClick: props.onClick,
        },
        content,
      );
};

export {
  TransferAction,
  TransferBrand,
  TransferCard,
  TransferInformation,
  TransferListItemCard,
  TransferPrice,
};