blitzkit/packages/website/src/components/TankopediaLoadout/index.tsx

import { alias } from "@blitzkit/core";
import type { Consumable, EquipmentSlot } from "@blitzkit/protos";
import { ClockIcon, ResetIcon, TrashIcon } from "@radix-ui/react-icons";
import { chunk } from "lodash-es";
import { api } from "../../api/dynamic";
import { equipmentColumns } from "../../config/equipment";
import { useConsumables } from "../../hooks/useConsumables";
import { DuelModule, useDuel } from "../../hooks/useDuel";
import { useEquipmentPreset } from "../../hooks/useEquipmentPreset";
import { useStrings } from "../../hooks/useStrings";
import { useTankCompatibility } from "../../hooks/useTankCompatibility";
import { useUnwrapper } from "../../hooks/useUnwrapper";
import { Tankopedia } from "../../stores/tankopedia";
import { hasUpgrades } from "../../tankopedia/hasUpgrades";
import { vehicleStatusKeys } from "../../tankopedia/tankState";
import type { ComputedCharacteristics } from "../../types/characteristics";
import { Button } from "../Button";
import { Heading } from "../Heading";
import { IconButton } from "../IconButton";
import { Text } from "../Text";
import { Tooltip } from "../Tooltip";
import styles from "./index.module.css";

const equipment = await api.equipment();

interface TankopediaLoadoutProps {
  characteristics: ComputedCharacteristics;
}

export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
  const tank = useDuel("protagonist", DuelModule.Tank);
  const showModules = hasUpgrades(tank);

  return (
    <>
      {/* {showModules && <Modules />} */}
      <Equipment />
      <Consumables characteristics={characteristics} />
      <State />
      <Status />
    </>
  );
}

function State() {
  const strings = useStrings();

  const shell = Tankopedia.use((state) => state.protagonist.shell);
  const speed = Tankopedia.use((state) => state.protagonist.speed);

  return (
    <div className={styles.section}>
      <div className={styles.header}>
        <Heading size="4">{strings.tanks.loadout.dynamics}</Heading>

        <IconButton
          color="red"
          onClick={() => {
            Tankopedia.mutate((draft) => {
              draft.protagonist.consumables = [];
            });
          }}
        >
          <TrashIcon />
        </IconButton>
      </div>

      <div className={styles.state}>
        <span>shell: {shell}</span>
        <span>speed: {speed}</span>
      </div>
    </div>
  );
}

function Status() {
  const strings = useStrings();
  const status = Tankopedia.use((state) => state.protagonist.status);

  return (
    <div className={styles.section}>
      <div className={styles.header}>
        <Heading size="4">{strings.tanks.loadout.status}</Heading>

        <IconButton
          color="red"
          onClick={() => {
            Tankopedia.mutate((draft) => {
              draft.protagonist.consumables = [];
            });
          }}
        >
          <TrashIcon />
        </IconButton>
      </div>

      <div className={styles.status}>
        {vehicleStatusKeys.map((group, index) => (
          <div key={index} className={styles.group}>
            {group.map((key) => (
              <IconButton
                key={key}
                radius="1"
                className={styles.state}
                data-selected={status[key]}
                color={status[key] ? "amber" : "gray"}
                variant={status[key] ? "surface" : "soft"}
                onClick={() => {
                  Tankopedia.mutate((draft) => {
                    draft.protagonist.status[key] =
                      !draft.protagonist.status[key];
                  });
                }}
              >
                <img src={`/media/status/${key}.png`} />
              </IconButton>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

interface ConsumablesProps {
  characteristics: ComputedCharacteristics;
}

function Consumables({ characteristics }: ConsumablesProps) {
  const strings = useStrings();
  const consumables = useConsumables();
  const tank = useDuel("protagonist", DuelModule.Tank);
  const gun = useDuel("protagonist", DuelModule.Gun);
  const isCompatible = useTankCompatibility(tank, gun);

  return (
    <div className={styles.section}>
      <div className={styles.header}>
        <Heading size="4">{strings.tanks.loadout.consumables}</Heading>

        <IconButton
          color="red"
          onClick={() => {
            Tankopedia.mutate((draft) => {
              draft.protagonist.consumables = [];
            });
          }}
        >
          <TrashIcon />
        </IconButton>
      </div>

      <div className={styles.consumables}>
        {Object.entries(consumables.consumables).map(([id, consumable]) => {
          if (!isCompatible(consumable.include, consumable.exclude)) {
            return null;
          }

          return (
            <ConsumableEntry key={id} id={Number(id)} consumable={consumable} />
          );
        })}
      </div>
    </div>
  );
}

interface ConsumableProps {
  id: number;
  consumable: Consumable;
}

function ConsumableEntry({ id, consumable }: ConsumableProps) {
  const isSelected = Tankopedia.use((state) =>
    state.protagonist.consumables.includes(id),
  );
  const tank = useDuel("protagonist", DuelModule.Tank);
  const unwrap = useUnwrapper();

  return (
    <div className={styles["consumable-wrapper"]}>
      <Tooltip tooltip={unwrap(consumable.name)}>
        <Button
          radius="1"
          variant={isSelected ? "surface" : "soft"}
          color={isSelected ? undefined : "gray"}
          className={styles.consumable}
          onClick={() => {
            Tankopedia.mutate((draft) => {
              const index = draft.protagonist.consumables.indexOf(id);

              if (index === -1) {
                draft.protagonist.consumables.push(id);
              } else {
                draft.protagonist.consumables.splice(index, 1);
              }
            });
          }}
        >
          <img src={alias("api", `/icons/consumables/${consumable.id}.webp`)} />
          <div className={styles.info}>
            <Text lowContrast size="minor">
              <div className={styles.entry}>
                <ClockIcon />
                10s
              </div>
            </Text>

            <Text lowContrast size="minor">
              <div className={styles.entry}>
                <ResetIcon />
                10s
              </div>
            </Text>
          </div>
        </Button>
      </Tooltip>

      {/* <Price price={price} /> */}
    </div>
  );
}

function Equipment() {
  const strings = useStrings();
  const tank = useDuel("protagonist", DuelModule.Tank);
  const equipment = useEquipmentPreset(tank.equipment_preset);

  return (
    <div className={styles.section}>
      <div className={styles.header}>
        <Heading size="4">{strings.tanks.loadout.equipment}</Heading>

        <IconButton
          color="red"
          onClick={() => {
            Tankopedia.mutate((draft) => {
              for (const key in draft.protagonist.equipment) {
                delete draft.protagonist.equipment[key];
              }
            });
          }}
        >
          <TrashIcon />
        </IconButton>
      </div>

      <div className={styles.equipment}>
        {chunk(equipment.slots, equipmentColumns).map((chunk, index) => (
          <EquipmentRow key={index} chunk={chunk} rowIndex={index} />
        ))}
      </div>
    </div>
  );
}

interface EquipmentRowProps {
  chunk: EquipmentSlot[];
  rowIndex: number;
}

function EquipmentRow({ chunk, rowIndex }: EquipmentRowProps) {
  return (
    <div className={styles.row}>
      {chunk.map((slot, index) => (
        <EquipmentSlotEntry
          key={index}
          slot={slot}
          rowIndex={rowIndex}
          columnIndex={index}
        />
      ))}
    </div>
  );
}

interface EquipmentSlotProps {
  slot: EquipmentSlot;
  rowIndex: number;
  columnIndex: number;
}

function EquipmentSlotEntry({
  slot,
  rowIndex,
  columnIndex,
}: EquipmentSlotProps) {
  const equipmentIndex = rowIndex * equipmentColumns + columnIndex;
  const tank = useDuel("protagonist", DuelModule.Tank);
  const equipment = useEquipmentPreset(tank.equipment_preset);
  // const { price } = equipment.price.unlock_slot_prices[equipmentIndex];

  return (
    <div className={styles.slots}>
      <div className={styles.options}>
        {slot.options.map((id, index) => (
          <EquipmentOption
            key={id}
            optionIndex={index}
            rowIndex={rowIndex}
            columnIndex={columnIndex}
          />
        ))}
      </div>

      {/* <Price price={price!} /> */}
    </div>
  );
}

interface EquipmentOptionProps {
  optionIndex: number;
  rowIndex: number;
  columnIndex: number;
}

function EquipmentOption({
  optionIndex,
  rowIndex,
  columnIndex,
}: EquipmentOptionProps) {
  const equipmentIndex = rowIndex * equipmentColumns + columnIndex;

  const tank = useDuel("protagonist", DuelModule.Tank);
  const equipmentPreset = useEquipmentPreset(tank.equipment_preset);
  const unwrap = useUnwrapper();

  const slot = equipmentPreset.slots[equipmentIndex];
  const id = slot.options[optionIndex];
  const specificEquipment = equipment.equipments[id];

  const isSelected = Tankopedia.use(
    (state) =>
      equipmentIndex in state.protagonist.equipment &&
      state.protagonist.equipment[equipmentIndex] === optionIndex,
  );

  return (
    <Tooltip tooltip={unwrap(specificEquipment.name)}>
      <IconButton
        color={isSelected ? undefined : "gray"}
        variant={isSelected ? "surface" : "soft"}
        data-selected={isSelected}
        radius="1"
        parentListChild
        className={styles.slot}
        onClick={() => {
          Tankopedia.mutate((draft) => {
            if (isSelected) {
              delete draft.protagonist.equipment[equipmentIndex];
            } else {
              draft.protagonist.equipment[equipmentIndex] = optionIndex;
            }
          });
        }}
      >
        <img
          className={styles.icon}
          alt={unwrap(specificEquipment.name)}
          src={alias("api", `/icons/equipment/${id}.webp`)}
        />
      </IconButton>
    </Tooltip>
  );
}

// function Modules() {
//   const strings = useStrings();
//   const tank = useDuel("protagonist", DuelModule.Tank);
//   const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
//   const alternates = Tankopedia.use((state) => state.protagonist.alternates);
//   const isStock = useMemo(() => {
//     return tank.tank!.upgrade_lines.every((line) => {
//       if (isAlternativeLine(line.name)) return true;
//       return upgrades[line.name] === 0;
//     });
//   }, [upgrades]);
//   const isUpgraded = useMemo(() => {
//     return tank.tank!.upgrade_lines.every((line) => {
//       if (isAlternativeLine(line.name)) return true;

//       return (
//         upgrades[line.name] === line.stages.length - 1 ||
//         (line.name in alternates && alternates[line.name])
//       );
//     });
//   }, [upgrades]);

//   return (
//     <div className={styles.section}>
//       <div className={styles.header}>
//         <Heading size="4">{strings.tanks.loadout.modules}</Heading>

//         <div className={styles["upgrade-buttons"]}>
//           <IconButton
//             variant={isStock ? "solid" : "soft"}
//             size="minor"
//             array
//             onClick={() => {
//               Tankopedia.mutate((draft) => {
//                 for (const line of tank.tank!.upgrade_lines) {
//                   if (isAlternativeLine(line.name)) continue;

//                   draft.protagonist.upgrades[line.name] = 0;
//                   draft.protagonist.alternates[line.name] = false;
//                 }
//               });
//             }}
//             color="gray"
//           >
//             <DoubleArrowLeftIcon />
//           </IconButton>

//           <IconButton
//             variant={isUpgraded ? "solid" : "soft"}
//             size="minor"
//             array
//             onClick={() => {
//               Tankopedia.mutate((draft) => {
//                 for (const line of tank.tank!.upgrade_lines) {
//                   draft.protagonist.upgrades[line.name] =
//                     line.stages.length - 1;

//                   if (isAlternativeLine(line.name)) {
//                     const original = originalLineName(line.name)!;
//                     draft.protagonist.alternates[original] = true;
//                   }
//                 }
//               });
//             }}
//             color="gray"
//           >
//             <DoubleArrowRightIcon />
//           </IconButton>
//         </div>
//       </div>

//       <div className={styles.lines}>
//         {/* TODO: hide lines with 1 module except for alts */}
//         {tank.tank!.upgrade_lines.map((line) => (
//           <Line
//             key={line.name}
//             name={line.name}
//             lines={tank.tank!.upgrade_lines}
//           />
//         ))}
//       </div>
//     </div>
//   );
// }

// interface LineProps {
//   name: string;
//   lines: UpgradeLine[];
// }

// function Line({ name, lines }: LineProps) {
//   const combinedLines = useMemo(() => {
//     const names: string[] = [name];

//     for (const originalLine in alternativeLines) {
//       const alternativeLine = alternativeLines[originalLine];

//       if (
//         originalLine === name &&
//         lines.some((line) => line.name === alternativeLine)
//       ) {
//         names.push(alternativeLine);
//       }
//     }

//     return names;
//   }, [name]);

//   return (
//     <div className={styles.line}>
//       {!isAlternativeLine(name) &&
//         combinedLines.map((name) => (
//           <div className={styles["chunks-wrapper"]}>
//             <LineInner key={name} name={name} lines={lines} />
//           </div>
//         ))}
//     </div>
//   );
// }

// function LineInner({ name, lines }: LineProps) {
//   const line = lines.find((line) => line.name === name)!;

//   return chunk(line.stages, maxModulesPerRow).map((chunk, wrapIndex) => (
//     <div className={styles["line-wrap"]}>
//       {wrapIndex > 0 && (
//         <Text size="minor" className={styles["wrap-marker"]} lowContrast>
//           <CornerBottomLeftIcon />
//         </Text>
//       )}

//       {chunk.map((stage, elementIndex) => (
//         <LineElement
//           key={elementIndex}
//           index={wrapIndex * maxModulesPerRow + elementIndex}
//           lineName={name}
//           stage={stage}
//         />
//       ))}
//     </div>
//   ));
// }

// interface LineElementProps {
//   index: number;
//   lineName: string;
//   stage: StageParameters;
// }

// function LineElement({ index, lineName, stage }: LineElementProps) {
//   const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
//   const alternates = Tankopedia.use((state) => state.protagonist.alternates);
//   const tank = useDuel("protagonist", DuelModule.Tank);
//   const strings = useStrings();
//   const gameStrings = useGameStrings("TankEntity");
//   const upgradePreset = useUpgradePreset(tank.tank!.tank_upgrade_preset);

//   let price: StandardPrice | undefined;

//   switch (stage.grade) {
//     case Grade.GRADE_COMMON:
//       price = upgradePreset.common_grade_price;
//       break;

//     case Grade.GRADE_RARE:
//       price = upgradePreset.rare_grade_price;
//       break;

//     case Grade.GRADE_EPIC:
//       price = upgradePreset.unique_grade_price;
//       break;

//     case Grade.GRADE_LEGENDARY:
//       price = upgradePreset.legendary_grade_price;
//       break;
//   }

//   for (const override of upgradePreset.prices_overrides) {
//     if (override.stage_tech_name !== stage.tech_name) continue;
//     price = override.price;
//   }

//   price ??= StandardPrice.create();

//   let isSelected: boolean;

//   if (isAlternativeLine(lineName)) {
//     const originalLine = originalLineName(lineName);
//     isSelected = alternates[originalLine!];
//   } else {
//     if (alternates[lineName]) {
//       isSelected = false;
//     } else {
//       isSelected = upgrades[lineName] === index;
//     }
//   }

//   return (
//     <div className={styles.wrapper}>
//       <Tooltip tooltip={gameStrings[stage.display_name]}>
//         <Button
//           className={styles.stage}
//           color={isSelected ? undefined : "gray"}
//           variant={isSelected ? "surface" : "soft"}
//           radius="1"
//           onClick={() => {
//             // TODO: make minimum selectable upgrade the last free module for tanks like the destiny

//             Tankopedia.mutate((draft) => {
//               const tankData = tank.tank!;

//               if (isAlternativeLine(lineName)) {
//                 const originalLine = originalLineName(lineName)!;

//                 draft.protagonist.alternates[originalLine] = true;
//                 draft.protagonist.upgrades[lineName] = index;
//               } else {
//                 draft.protagonist.alternates[lineName] = false;
//                 draft.protagonist.upgrades[lineName] = index;
//               }

//               for (const required of stage.required_upgrades) {
//                 for (const line of tankData.upgrade_lines) {
//                   let i = 0;

//                   for (const candidateStage of line.stages) {
//                     if (candidateStage.tech_name === required) {
//                       draft.protagonist.upgrades[line.name] = Math.max(
//                         draft.protagonist.upgrades[line.name],
//                         i,
//                       );
//                     }

//                     i++;
//                   }
//                 }
//               }

//               for (const line of tankData.upgrade_lines) {
//                 if (draft.protagonist.alternates[line.name]) {
//                   continue;
//                 }

//                 let i = draft.protagonist.upgrades[line.name];

//                 while (i > 0) {
//                   const currentStage = line.stages[i];

//                   const valid = currentStage.required_upgrades.every(
//                     (required) => {
//                       for (const otherLine of tankData.upgrade_lines) {
//                         const idx = draft.protagonist.upgrades[otherLine.name];

//                         if (otherLine.stages[idx]?.tech_name === required) {
//                           return true;
//                         }
//                       }

//                       return false;
//                     },
//                   );

//                   if (valid) break;

//                   i--;
//                 }

//                 draft.protagonist.upgrades[line.name] = i;
//               }
//             });
//           }}
//         >
//           <img
//             className={styles.icon}
//             src={`/media/modules/${stage.stage_type}.webp`}
//           />

//           <Text weight="light" lowContrast size="minor" className={styles.tier}>
//             {isAlternativeLine(lineName)
//               ? strings.tanks.loadout.alternative
//               : romanize(stage.number)}
//           </Text>
//         </Button>
//       </Tooltip>

//       {<Price className={styles.price} price={price} />}
//     </div>
//   );
// }