import { FC } from "react";

import { Accordion } from "~/components/Accordion";
import { ItemName } from "~/components/ItemName";
import { useCharacterEngine } from "~/hooks/useCharacterEngine";
import { EquipmentActions } from "~/subApps/builder/components/EquipmentActions";
import { useEquipmentMethods } from "~/subApps/builder/hooks/useEquipmentMethods";
import { Item } from "~/types";

import ItemDetail from "../../ItemDetail";
import { ItemListInformationCollapsible } from "../../ItemListInformationCollapsible";
import { EquipmentListItemActions } from "../EquipmentListItem";

interface GearListProps {
  item: Item;
  unequipLabel: string;
  equipLabel: string;
  showRemove?: boolean;
  showEquip?: boolean;
  showUnequip?: boolean;
  showAttuning?: boolean;
  showHeaderAction: boolean;
}

export const GearListItem: FC<GearListProps> = ({
  item,
  equipLabel,
  unequipLabel,
  ...props
}) => {
  const { ruleData, characterTheme, itemUtils, helperUtils, containerLookup } =
    useCharacterEngine();
  const actions = useEquipmentMethods();
  const image = itemUtils.getAvatarUrl(item);
  const altText = itemUtils.getName(item);
  const container = helperUtils.lookupDataOrFallback(
    containerLookup,
    itemUtils.getContainerDefinitionKey(item)
  );

  const getMetaItems = () => {
    const { isCustomized } = item;
    const type = itemUtils.getType(item);
    const subType = itemUtils.getSubType(item);
    const isOffhand = itemUtils.isOffhand(item);

    return [
      ...(type ? [type] : []),
      ...(subType ? [subType] : []),
      ...(isOffhand ? ["Dual Wield"] : []),
      ...(isCustomized ? ["Customized"] : []),
    ];
  };

  return (
    <Accordion
      summary={<ItemName item={item} showLegacyBadge={true} />}
      summaryAction={
        <EquipmentActions
          item={item}
          equipLabel={equipLabel}
          unequipLabel={unequipLabel}
        />
      }
      summaryImage={image}
      summaryImageAlt={altText}
      summaryMetaItems={getMetaItems()}
      variant="paper"
    >
      <ItemListInformationCollapsible ruleData={ruleData} item={item} />
      <ItemDetail
        container={container}
        theme={characterTheme}
        item={item}
        ruleData={ruleData}
        showCustomize={false}
        showActions={false}
      />
      <EquipmentListItemActions item={item} {...actions} {...props} />
    </Accordion>
  );
};
