import * as React from "react";
import {
  TextHighlight,
  __experimentalVStack as VStack,
  __experimentalHStack as HStack,
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import type { Title, TitleIdType } from "../../types";
import { getIdMatch, getItemUrl } from "../../context/api";
import { TitleInfoContainer, TitleInfoHeader, Badge } from "./TitleInfo.styles";

export type TitleInfoProps<T extends Title, C extends React.ElementType = "div"> =
  React.ComponentPropsWithoutRef<C> & {
    as?: C;
    item: T;
    highlight?: string;
    idType?: TitleIdType;
    details?: boolean;
  };

export const TitleInfo = <T extends Title, C extends React.ElementType = "div">({
  as = "div" as C,
  highlight = "",
  idType: idTypeProp,
  details = false,
  item,
  ...props
}: TitleInfoProps<T, C>): JSX.Element => {
  highlight = String(highlight);
  const idMatch = getIdMatch(item as Title, highlight) || { id: null, idType: undefined };
  const { id, idType: idMatchType } = idMatch;
  const idType = idTypeProp || idMatchType;
  const url = getItemUrl(item as Title, idType);
  const { objectType, title, director, originalReleaseYear } = item;
  const badgeSize = details ? "small" : "small";

  return (
    <TitleInfoContainer as={as} {...props} size={details ? "large" : "normal"}>
      <VStack key={`${item.justwatchId}:${objectType}`} as="span">
        <TitleInfoHeader
          size={details ? "large" : "normal"}
          weight={details ? "bold" : "normal"}
        >
          {title && <TextHighlight highlight={highlight} text={title}/>}
        </TitleInfoHeader>
        <HStack justify="flex-between" as="span">
          <a
            href={url || "#"}
            target="_blank"
            style={{ textTransform: "uppercase", textDecoration: "none" }}
          >
            <Badge
              size={badgeSize}
              variant="primary"
            >
              {objectType}
            </Badge>
          </a>
            {originalReleaseYear && (
              <Badge
                variant="secondary"
                size={badgeSize}
                style={{ width: 'fit-content' }}
              >
                <TextHighlight
                  highlight={
                    originalReleaseYear.toString() === highlight
                      ? highlight
                      : ""
                  }
                  text={originalReleaseYear.toString()}
                />
              </Badge>
            )}
            {id && idType ? (
              <div style={{ marginLeft: "auto", fontSize: "0.75rem" }}>
                <code>
                  <TextHighlight highlight={highlight} text={id} />
                </code>
              </div>
            ) : null}
          </HStack>
          {details && (
            <VStack as="span">
              {director && (
                <span>
                  {__('Director', 'justwatch-partner-integrations')}:{"\t"}
                  <b><TextHighlight highlight={highlight} text={director} /></b>
                </span>
              )}
            </VStack>
          )}
        </VStack>
    </TitleInfoContainer>
  );
};