import { Divider, Group, Stack, TagsInput, TextInput } from '@mantine/core';
import { useLocalStorage } from '@mantine/hooks';
import { useState } from 'react';

import type { GridlerColumns } from '../components/Column';

import { APIAdaptorGoLangv2 } from '../components/APIAdaptorGoLangv2';
import { Gridler } from '../Gridler';

export const GridlerGoAPIExampleEventlog = () => {
  const [apiUrl, setApiUrl] = useLocalStorage({
    defaultValue: 'http://localhost:8080/api',
    key: 'apiurl',
  });
  const [apiKey, setApiKey] = useLocalStorage({ defaultValue: '', key: 'apikey' });
  const [selectRow, setSelectRow] = useState<string | undefined>('');
  const [values, setValues] = useState<Array<Record<string, any>>>([]);
  const columns: GridlerColumns = [
    {
      id: 'id_process',
      title: 'RID',
      width: 100,
    },

    {
      id: 'process',
      title: 'Process',
      tooltip: (buffer) => {
        return `Process: ${buffer?.process}\nType: ${buffer?.processtype}\nStatus: ${buffer?.status}`;
      },
      width: 200,
    },
    {
      id: 'processtype',
      title: 'Type',
    },

    {
      disableSort: true,
      id: 'status',
      title: 'Status',
      width: 100,
    },
  ];

  return (
    <Stack h="80vh">
      <h2>Demo Using Go API Adaptor</h2>
      <TextInput label="API Url" onChange={(e) => setApiUrl(e.target.value)} value={apiUrl} />
      <TextInput label="API Key" onChange={(e) => setApiKey(e.target.value)} value={apiKey} />
      <Divider />
      <Gridler
        columns={columns}
        getMenuItems={(id, _state, row, col, defaultItems) => {
          return [
            ...(defaultItems ?? []),
            // {
            //   id: 'test',
            //   label: `Test -${id}`,
            //   onClick: () => {
            //     console.log('Test clicked', row, col);
            //   },
            // },
          ];
        }}
        keyField="id_process"
        onChange={(v) => {
          //console.log('GridlerGoAPIExampleEventlog onChange', v);
          setValues(v);
        }}
        sections={{
          bottom: <div style={{ backgroundColor: 'teal', height: '25px' }}>bottom</div>,
          left: <div style={{ backgroundColor: 'orange', width: '20px' }}>L</div>,
          right: <div style={{ backgroundColor: 'green', width: '20px' }}>R</div>,
          top: <div style={{ backgroundColor: 'purple', height: '20px' }}>top</div>,
        }}
        selectedRow={selectRow ? parseInt(selectRow, 10) : undefined}
        selectMode="row"
        uniqueid="gridtest"
        values={values}
      >
        <APIAdaptorGoLangv2 authtoken={apiKey} url={`${apiUrl}/public/process`} />
      </Gridler>
      <Divider />
      <Group>
        <TextInput
          onChange={(e) => setSelectRow(e.target.value)}
          placeholder="row"
          value={selectRow}
          w="90px"
        />
        <TagsInput
          data={[]}
          onChange={(str) => setValues(str.map((v) => ({ id_process: String(v) })))}
          placeholder="Values"
          value={values.map((v) => String(v?.id_process))}
        />
        ;
      </Group>
    </Stack>
  );
};