import { useMemo } from "react";

import { HttpTypes } from "@medusajs/types";
import { UseFormReturn, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";

import {
  createDataGridHelper,
  createDataGridPriceColumns,
  DataGrid,
} from "../../../components/data-grid/index.ts";
import { useRouteModal } from "../../../components/modals/index";
import { usePricePreferences } from "../../../hooks/api/price-preferences.tsx";
import { useRegions } from "../../../hooks/api/regions.tsx";
import { useStore } from "../../../hooks/api/store.tsx";
import { ProductCreateSchemaType } from "../product-create/types.ts";

type VariantPricingFormProps = {
  form: UseFormReturn<ProductCreateSchemaType>;
  "data-testid"?: string;
};

export const VariantPricingForm = ({
  form,
  "data-testid": dataTestId,
}: VariantPricingFormProps) => {
  const { store } = useStore();
  const { regions } = useRegions({ limit: 9999 });
  const { price_preferences: pricePreferences } = usePricePreferences({});

  const { setCloseOnEscape } = useRouteModal();

  const columns = useVariantPriceGridColumns({
    currencies: store?.supported_currencies,
    regions,
    pricePreferences,
  });

  const variants = useWatch({
    control: form.control,
    name: "variants",
  }) as any;

  return (
    <div data-testid={dataTestId}>
      <DataGrid
        columns={columns}
        data={variants}
        state={form}
        onEditingChange={(editing) => setCloseOnEscape(!editing)}
        data-testid={dataTestId}
      />
    </div>
  );
};

const columnHelper = createDataGridHelper<
  HttpTypes.AdminProductVariant,
  ProductCreateSchemaType
>();

const useVariantPriceGridColumns = ({
  currencies = [],
  regions = [],
  pricePreferences = [],
}: {
  currencies?: HttpTypes.AdminStore["supported_currencies"];
  regions?: HttpTypes.AdminRegion[];
  pricePreferences?: HttpTypes.AdminPricePreference[];
}) => {
  const { t } = useTranslation();

  return useMemo(() => {
    return [
      columnHelper.column({
        id: t("fields.title"),
        header: t("fields.title"),
        cell: (context) => {
          const entity = context.row.original;
          return (
            <DataGrid.ReadonlyCell context={context}>
              <div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
                <span className="truncate">{entity.title}</span>
              </div>
            </DataGrid.ReadonlyCell>
          );
        },
        disableHiding: true,
      }),
      ...createDataGridPriceColumns<
        HttpTypes.AdminProductVariant,
        ProductCreateSchemaType
      >({
        currencies: currencies.map((c) => c.currency_code),
        regions,
        pricePreferences,
        getFieldName: (context, value) => {
          if (context.column.id?.startsWith("currency_prices")) {
            return `variants.${context.row.index}.prices.${value}`;
          }
          return `variants.${context.row.index}.prices.${value}`;
        },
        t,
      }),
    ];
  }, [t, currencies, regions, pricePreferences]);
};