import * as React from "react";
import { Popup, Button } from "semantic-ui-react";

export const COLUMNS_MASTER = [
  {
    Header: "ID Categoria",
    accessor: "id",
    maxWidth: 60,
    show: false,
  },
  {
    Header: "Nome",
    accessor: "name",
    filterable: true,
  },
];

export const COLUMNS_DETAIL = [
  {
    Header: "ID Subcategoria",
    accessor: "id",
    maxWidth: 150,
  },
  {
    Header: "Nome",
    accessor: "name",
  },
];

export const DATA = [
  {
    id: 1,
    name: "Acessórios de Tecnologia novo",
    subcategories: [
      { id: 1, name: "Pen Drive" },
      { id: 2, name: "Mouse" },
      { id: 3, name: "Teclado" },
    ],
  },
  {
    id: 2,
    name: "Ar e Ventilação",
    subcategories: [
      { id: 1, name: "Ventilador" },
      { id: 2, name: "Ar condicionado" },
      { id: 3, name: "Umidificador" },
    ],
  },
  { id: 3, name: "Armarinhos novo" },
  { id: 4, name: "Áudio" },
  { id: 5, name: "Automotivo" },
  { id: 6, name: "Bebês" },
  { id: 7, name: "Bebidas e Alimentos novo" },
  { id: 8, name: "Beleza e Perfumaria" },
  { id: 9, name: "Brinquedos" },
  { id: 10, name: "Cama, Mesa e Banho" },
  { id: 11, name: "Câmeras e Drones" },
  { id: 12, name: "Casa e Construção" },
  {
    id: 13,
    name: "Celulares",
    subcategories: [
      { id: 1, name: "Smarthphone" },
      { id: 2, name: "Motorola" },
      { id: 3, name: "Apple" },
      { id: 4, name: "LG" },
      { id: 5, name: "Sony" },
      { id: 6, name: "Lenovo" },
      { id: 7, name: "Quantum" },
      { id: 8, name: "Alcatel" },
      { id: 9, name: "Fone de Ouvido" },
      { id: 10, name: "Dock Station" },
    ],
  },
  { id: 14, name: "Colchões" },
  { id: 15, name: "Eletrodomésticos" },
  { id: 16, name: "Eletroportáteis" },
  { id: 17, name: "Esporte e Lazer" },
  { id: 18, name: "Ferramentas e Jardim" },
  { id: 19, name: "Games" },
  { id: 20, name: "Informática" },
  { id: 21, name: "Instrumentos Musicais" },
  { id: 22, name: "Linha Industrial" },
  { id: 23, name: "Livros novo" },
  { id: 24, name: "Mercado novo" },
  { id: 25, name: "Móveis e Decoração" },
  { id: 26, name: "Natal" },
  { id: 27, name: "Papelaria" },
  { id: 28, name: "Pet Shop e Veterinária" },
  { id: 29, name: "Relógios e Relojoaria" },
  { id: 30, name: "Saldão" },
  { id: 31, name: "Saúde e Cuidados Pessoais" },
  { id: 32, name: "Serviços novo" },
  { id: 33, name: "Suplementos Alimentares" },
  { id: 34, name: "Tablets, iPads e E-readers" },
  { id: 35, name: "Telefonia Fixa" },
  { id: 36, name: "Tv e Vídeo" },
  { id: 37, name: "Utilidades Domésticas" },
  { id: 38, name: "Conheça também" },
  { id: 39, name: "Plano Controle" },
  { id: 40, name: "Consórcio Luiza" },
  { id: 41, name: "Seguro Casa Protegida" },
];

export const COLUMNS_MASTER_2 = [
  {
    Header: "",
    accessor: "action",
    maxWidth: 100,
    filterable: false,
    Cell: (row: any) => (
      <Button.Group basic={true} size="medium">
        <Popup
          trigger={
            <Button
              icon="edit"
              onClick={() => {
                alert(JSON.stringify(row.original));
              }}
            />
          }
          content="Editar registro"
          inverted={true}
          position="left center"
        />
        <Popup
          trigger={
            <Button
              icon="trash"
              onClick={() => {
                alert(JSON.stringify(row.original));
              }}
            />
          }
          content="Remover registro"
          inverted={true}
          position="top center"
        />
      </Button.Group>
    ),
  },
  {
    Header: "ID Categoria",
    accessor: "id",
    maxWidth: 60,
  },
  {
    Header: "Nome",
    accessor: "name",
  },
];