import { ScrollArea } from "@/ui";
import { useState } from "react";
import { useTranslation } from "react-i18next";

export type BlockDataType = {
  id: number;
  code: string;
  title: string;
  body: string;
};

const blockData: Record<string, BlockDataType[]> = {
  en: [
    {
      id: 2000000098,
      code: "CAP_CLA_SEMI_SUSPENDIDO_EN",
      title: "Finish: MELAMINE / colour: TO BE DETERMINED",
      body: 'Thickness block: 19 mm / Thickness complements: 19 mm.\r\nHanging rods: CHROME/ BLACK\r\nGlass drawer fronts: STRAIGHT / "U" - FLOAT BRONZE C-424 \r\nDrawer handle: xxxxx / Drawers: 4 DE 180 MM.\r\nShoe rack door: YES/NO / Profile finish: BLACK LACQUER / SILVER MATTE\r\nShoe cabinet door glass finish: FLOAT BRONZE C-424\r\nComposed of:',
    },

    {
      id: 2000000097,
      code: "CAP_CLA_SEMI_SUSPENDIDO_TITULO_EN",
      title: "CLASSIC DRESSER / SEMI-HUNG  SUSPENDED / SUSPENDED",
      body: "",
    },

    {
      id: 2000000084,
      code: "CAP_FRE_ARM_ABATIBLE_EN",
      title: "CHARACTERISTICS OF THE FRONT OF THE HINGED WARDROBE",
      body: "Size of opening: 2275x1390 mm.\r\nModel: ARGO / Finish: LACQUER / Colour: TO BE DETERMINED\r\nDoor thickness: 22 or 19 mm\r\nDoor finish: SMOOTH \r\nHandle: KNOB TO BE DETERMINED\r\nHardware finish: CHROME OR ANTHRACITE\r\nPerimetral doorposts: VISIBLE, REMETED OR COMBI TO BE DETERMINED.\r\nNumber of doors: 2 \r\nComposed of:",
    },

    {
      id: 2000000086,
      code: "CAP_FRE_ARM_ABATIBLE_TITULO_EN",
      title: "FRONT OF THE HINGED WARDROBE",
      body: "",
    },

    {
      id: 2000000089,
      code: "CAP_FRE_ARM_CORREDERA_EN",
      title: "Size of opening: 2440x5180mm. ",
      body: "Model: PANORAMIC P.O. / Finish: LACQUER / Colour: WHITE\r\nNo. of listers: NO LISTELS / Panels finish: LACQUERED PANEL \r\nHandle: \r\nPerimeter frame:      \r\nNº of doors: \r\nINCORPORATED HYDRAULIC BRAKE (not available in lower doors of 650 mm.) OR INCORPORATED MAGNETIC BRAKE. \r\nComposed of:",
    },

    {
      id: 2000000088,
      code: "CAP_FRE_ARM_CORREDERA_TITULO_EN",
      title: "SLIDING WARDROBE FRONT",
      body: "",
    },

    {
      id: 2000000113,
      code: "CAP_INSTALACION_EN",
      title: "Installation Cabinet x",
      body: "",
    },

    {
      id: 2000000115,
      code: "CAP_INSTALACION_TITULO_EN",
      title: "INSTALLATION SERVICE - NET PRICE",
      body: "",
    },

    {
      id: 2000000092,
      code: "CAP_INT_ARM_FORRADO_EN",
      title: "Finish: MELAMINE / colour: TO BE DETERMINED",
      body: 'Thickness block: 19 mm / Thickness complements: 19 mm.\r\nHanging rods: CHROME/ BLACK\r\nGlass drawer fronts: STRAIGHT / "U" - FLOAT BRONZE C-424 \r\nDrawer handle: xxxxx / Drawers: 4 DE 180 MM.\r\nComposed of:',
    },

    {
      id: 2000000091,
      code: "CAP_INT_ARM_FORRADO_TITULO_EN",
      title: "INTERIOR OF THE LINED WARDROBE",
      body: "",
    },

    {
      id: 2000000109,
      code: "CAP_INT_EST_CRISTAL_EN",
      title: "Frames finish: BLACK ANODIZED",
      body: 'Side frame panel finish: BRONZE FLOAT BRONZE GLASS C-424\r\nRear panel finish: BRONZE FLOAT GLASS C-424\r\nComplements finish: MELAMIN / Colour: DENBER OAK M-242\r\nThickness of accessories: 25 mm.\r\nHanging bars: BLACK\r\nGlass drawer fronts: STRAIGHT / "U" - FLOAT BRONZE C-424 \r\nDrawer handle: xxxxx / Drawers: 4 DE 180 MM.\r\nComposed of:',
    },

    {
      id: 2000000107,
      code: "CAP_INT_EST_CRISTAL_TITULO_EN",
      title: "INSIDE CHARACTERISTICS OF WARDROBE GLASS STRUCTURE",
      body: "",
    },

    {
      id: 2000000095,
      code: "CAP_SEP_AMBIENTES_EN",
      title: "CHARACTERISTICS SEPARATION OF ROOMS",
      body: "Size of opening: 2450x3000 mm.\r\nModel: LYN / Finish: ANODISED / Colour: BLACK\r\nNo. of crosspieces: 2 HORIZONTAL CROSSBARS\r\nPanel finish: TRANSPARENT TEMPLARED \r\nHandle: DOUBLE PER DOOR\r\nBrake: DOUBLE PER DOOR (OPENING AND CLOSING)\r\nGuide: VISTA (DOUBLE EMBELLECEDOR)\r\nNumber of panels: 2 SLIDING + 2 FIXED",
    },

    {
      id: 2000000094,
      code: "CAP_SEP_AMBIENTES_TITULO_EN",
      title: "SEPARATION OF ROOMS",
      body: "",
    },

    {
      id: 2000000110,
      code: "CAP_SUMINISTRO_EN",
      title: "Delivery of material to the customer's home",
      body: "",
    },

    {
      id: 2000000112,
      code: "CAP_SUMINISTRO_TITULO_EN",
      title: "SUPPLY SERVICE - NET PRICE",
      body: "",
    },
  ],
  es: [
    {
      id: 54,
      code: "CAP_CLA_SEMI_SUSPENDIDO_ES",
      title: "Acabado: MELAMINA / color:   A DETERMINAR",
      body: "Espesor bloque: 25 mm.  / Espesor complementos: 25 mm.\r\nBarras de colgar: CROMO/ NEGRA/ BRONCE\r\nFrentes cristal cajones: RECTO / “U” – FLOAT  BRONCE C-424\r\nTirador cajones:  FRENTE BAJO / Cajones: 4 DE 180 MM. A DETERMINAR\r\nBaldas deslizantes: X DE 145 MM. A DETERMINAR\r\nCompuesto por:",
    },
    {
      id: 2000000096,
      code: "CAP_CLA_SEMI_SUSPENDIDO_TITULO_ES",
      title: "CLASICO / SEMISUSPENDIDO / SUSPENDIDO",
      body: "",
    },
    {
      id: 52,
      code: "CAP_FRE_ARM_ABATIBLE_ES",
      title: "CARACTERISTICAS FRENTE DE ARMARIO",
      body: "Medida de hueco: 2275x1390 mm.\r\nModelo: ARGO / Acabado: LACADO / Color: A DETERMINAR\r\nGrosor hoja: 22 o 19 mm\r\nAcabado de hojas: LISAS\r\nTirador: UÑERO A DETERMINAR\r\nAcabado herrajes: CROMADO O ANTRACITA\r\nJambas perimetrales: VISTAS, REMETIDAS O COMBI A DETERMINAR.\r\nNº de hojas: 2\r\nCompuesto por:",
    },
    {
      id: 2000000085,
      code: "CAP_FRE_ARM_ABATIBLE_TITULO_ES",
      title: "FRENTE DE ARMARIO ABATIBLE",
      body: "",
    },
    {
      id: 51,
      code: "CAP_FRE_ARM_CORREDERA_ES",
      title: "CARACTERISTICAS FRENTE DE ARMARIO",
      body: "Medida de Hueco:2440x5180mm.\r\nModelo: PANORAMIC P.O. / Acabado: LACADO  / Color: BLANCO\r\nNº de lístelos: SIN LISTELOS  / Acabado paneles:  PANEL LACADO\r\nTirador:\r\nCerco perimetral:     \r\nNº de hojas:\r\nFRENO HIDRAULICO INCORPORADO O FRENO MAGNETICO INCORPORADO\r\nCompuesto por:",
    },
    {
      id: 2000000087,
      code: "CAP_FRE_ARM_CORREDERA_TITULO_ES",
      title: "FRENTE DE ARMARIO CORREDERA",
      body: "",
    },
    {
      id: 55,
      code: "CAP_INSTALACION_ES",
      title: "Instalación Armario x",
      body: "",
    },
    {
      id: 2000000114,
      code: "CAP_INSTALACION_TITULO_ES",
      title: "SERVICIO DE INSTALACIÓN - PRECIO NETO",
      body: "",
    },
    {
      id: 53,
      code: "CAP_INT_ARM_FORRADO_ES",
      title: "CARACTERISTICAS INTERIOR DE ARMARIO",
      body: "Acabado: MELAMINA / color:   A DETERMINAR\r\nEspesor bloque: 19 mm.  / Espesor complementos: 19 mm.\r\nBarras de colgar: CROMO/ NEGRA/ BRONCE\r\nFrentes cristal cajones: RECTO / “U” – FLOAT  BRONCE C-424\r\nTirador cajones:  FRENTE BAJO / Cajones: 4 DE 180 MM. A DETERMINAR\r\nBaldas deslizantes:  X DE 145 MM. A DETERMINAR\r\nCompuesto por:",
    },
    {
      id: 2000000090,
      code: "CAP_INT_ARM_FORRADO_TITULO_ES",
      title: "INTERIOR DE ARMARIO FORRADO",
      body: "",
    },
    {
      id: 2000000108,
      code: "CAP_INT_EST_CRISTAL_ES",
      title: "Acabado bastidores: ANODIZADO NEGRO",
      body: "Acabado panel bastidores laterales: CRISTAL TEMPLADO FLOAT BRONCE C-424\r\nAcabado trasera: CRISTAL TEMPLADO FLOAT BRONCE C-424\r\nAcabado complementos: MELAMINA  / Color: ROBLE DENBER M-242\r\nEspesor complementos: 25 mm.\r\nBarras de colgar: NEGRA\r\nFrentes cristal cajones: RECTO / “U” – FLOAT  BRONCE C-424 \r\nTirador cajones:  xxxxx / Cajones: 4 DE 180 MM.\r\nCompuesto por:",
    },
    {
      id: 2000000106,
      code: "CAP_INT_EST_CRISTAL_TITULO_ES",
      title: "INTERIOR DE ARMARIO ESTRUCTURA DE CRISTAL",
      body: "",
    },
    {
      id: 50,
      code: "CAP_SEP_AMBIENTES_ES",
      title: "CARACTERISTICAS SEPARACIÓN DE AMBIENTES",
      body: "Medida de Hueco: 2450x3000 mm.\r\nModelo: LYN / Acabado: ANODIZADO / Color: NEGRO\r\nNº de travesaños: 2 TRAVESAÑOS HORIZONTALES\r\nAcabado paneles: TRANSPARENTE TEMPLADO   \r\nTirador: DOBLE POR PUERTA\r\nFreno: DOBLE POR PUERTA (APERTURA Y CIERRE)\r\nGuía: VISTA (DOBLE EMBELLECEDOR)\r\nNº de hojas: 2 CORREDERAS + 2 FIJOS",
    },
    {
      id: 2000000093,
      code: "CAP_SEP_AMBIENTES_TITULO_ES",
      title: "SEPARACIÓN DE AMBIENTES",
      body: "",
    },
    {
      id: 56,
      code: "CAP_SUMINISTRO_ES",
      title: "Entrega de material en domicilio cliente",
      body: "",
    },
    {
      id: 2000000111,
      code: "CAP_SUMINISTRO_TITULO_ES",
      title: "SERVICIO DE SUMINISTRO - PRECIO NETO",
      body: "",
    },
  ],
};

export const BlockList = ({
  onSelect,
}: {
  onSelect: (data: BlockDataType, quantity: number) => void;
}) => {
  const { i18n } = useTranslation();
  const [language] = useState(i18n.language);
  const [listState] = useState(blockData[language.toLowerCase()]);

  return (
    <ScrollArea className='h-96'>
      <div className='flex flex-col gap-2 p-4 pt-0'>
        {listState
          .sort((a, b) => a.title.localeCompare(b.title))
          .map((_block, _blockIdx) => {
            return (
              <button
                key={_block.id}
                className='flex flex-col items-start gap-2 p-3 text-sm text-left transition-all border rounded-lg hover:bg-accent'
                onClick={() => onSelect && onSelect(_block, 1)}
              >
                <div className='flex flex-col w-full gap-1'>
                  <div className='flex items-center'>
                    <div className='flex items-center gap-2'>
                      <div className='font-semibold'>{_block.title}</div>
                    </div>
                  </div>

                  <div className='text-xs line-clamp-2 text-muted-foreground'>
                    <p
                      dangerouslySetInnerHTML={{
                        __html: _block.body.substring(0, 300).replace("\r\n", "<br>"),
                      }}
                    />
                  </div>
                </div>
              </button>
            );
          })}
      </div>
    </ScrollArea>
  );
};
