import { HttpTypes } from "@medusajs/types"
import { Tooltip } from "@medusajs/ui"
import { ColumnDef } from "@tanstack/react-table"
import { useMemo } from "react"
import { useTranslation } from "react-i18next"

import { Thumbnail } from "../../../../components/common/thumbnail"
import {
  createDataGridHelper,
  DataGrid,
} from "../../../../components/data-grid"
import { createDataGridPriceColumns } from "../../../../components/data-grid/helpers/create-data-grid-price-columns"
import { DataGridQuantityPriceCell } from "../../../../components/data-grid/components/data-grid-quantity-price-cell"
import { PricingCreateSchemaType } from "../../price-list-create/components/price-list-create-form/schema"
import { isProductRow } from "../utils"

const columnHelper = createDataGridHelper<
  HttpTypes.AdminProduct | HttpTypes.AdminProductVariant,
  PricingCreateSchemaType
>()

export const usePriceListGridColumns = ({
  currencies = [],
  regions = [],
  pricePreferences = [],
}: {
  currencies?: HttpTypes.AdminStoreCurrency[]
  regions?: HttpTypes.AdminRegion[]
  pricePreferences?: HttpTypes.AdminPricePreference[]
}) => {
  const { t } = useTranslation()

  const colDefs: ColumnDef<
    HttpTypes.AdminProduct | HttpTypes.AdminProductVariant
  >[] = useMemo(() => {
    return [
      columnHelper.column({
        id: t("fields.title"),
        header: t("fields.title"),
        cell: (context) => {
          const entity = context.row.original
          if (isProductRow(entity)) {
            return (
              <DataGrid.ReadonlyCell context={context}>
                <div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
                  <Thumbnail src={entity.thumbnail} size="small" />
                  <Tooltip content={entity.title}>
                    <span className="truncate">{entity.title}</span>
                  </Tooltip>
                </div>
              </DataGrid.ReadonlyCell>
            )
          }

          return (
            <DataGrid.ReadonlyCell context={context} color="normal">
              <div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
                <Tooltip content={entity.title}>
                  <span className="truncate">{entity.title}</span>
                </Tooltip>
              </div>
            </DataGrid.ReadonlyCell>
          )
        },
        disableHiding: true,
      }),
      ...createDataGridPriceColumns<
        HttpTypes.AdminProduct | HttpTypes.AdminProductVariant,
        PricingCreateSchemaType
      >({
        currencies: currencies.map((c) => c.currency_code),
        regions,
        pricePreferences,
        renderPriceCell: (code, context) => (
          <DataGridQuantityPriceCell
            code={code}
            context={context}
            getTieredFieldName={(field) =>
              field
                .replace("currency_prices", "conditional_currency_prices")
                .replace("region_prices", "conditional_region_prices")
                .replace(/\.0\.amount$/, "")
            }
          />
        ),
        isReadyOnly: (context) => {
          const entity = context.row.original
          return isProductRow(entity)
        },
        getFieldName: (context, value) => {
          const entity = context.row.original

          if (isProductRow(entity)) {
            return null
          }

          if (context.column.id?.startsWith("currency_prices")) {
            return `products.${entity.product_id}.variants.${entity.id}.currency_prices.${value}.0.amount`
          }

          return `products.${entity.product_id}.variants.${entity.id}.region_prices.${value}.0.amount`
        },
        t,
      }),
    ]
  }, [t, currencies, regions, pricePreferences])

  return colDefs
}