import React from 'react';
import doc from './doc.mdx?raw';

import {
  TableContainer,
  Table,
  TableCaption,
  TableHead,
  TableRow,
  TableBody,
  TableHeadCell,
  TableDataCell,
  TableFloatingScroll,
} from '@digigov/ui/content/Table';
import {
  Dropdown,
  DropdownButton,
  DropdownContent,
} from '@digigov/ui/navigation/Dropdown';
import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';

export default {
  title: 'Digigov UI/content/Table',
  description:
    'Use the table component to make information easier to compare and scan for users.',
  link: 'https://guide.services.gov.gr/docs/components/table',
  component: Table,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'Table',
};

const data = {
  title: 'Χρήστες',
  labels: {
    name: 'Ονοματεπώνυμο',
    role: 'Ρόλος',
    email: 'Email',
    phone: 'Ώρες',
    country: 'Χώρα',
    active: 'Ενεργός',
    actions: 'Ενέργειες',
  },
  content: [
    {
      name: 'Μάριος Μενεξές',
      role: 'Χειριστής',
      email: 'marios@mail.com',
      phone: '34',
      country: 'Ελλάδα',
      active: true,
    },
    {
      name: 'Καλλιόπη Παπαδοπούλου',
      role: 'Χειριστής',
      email: 'kalliopi@mail.com',
      phone: '65',
      country: 'Ελλάδα',
      active: true,
    },
    {
      name: 'Μαρία Φλούπη',
      role: 'Διαχειριστής',
      email: 'maria@mail.com',
      phone: '12',
      country: 'Ελλάδα',
      active: false,
    },
    {
      name: 'Ηλέκτρα Αποστόλου',
      role: 'Διαχειριστής',
      email: 'ilektra@mail.com',
      phone: '26',
      country: 'Ελλάδα',
      active: true,
    },
  ],
};

export const WithControls = {
  render: (args) => {
    const TableContent = () => (
      <Table
        headerVariant={args.headerVariant}
        verticalBorders={args.verticalBorders}
        variant={args.variant}
        dense={args.dense}
        stacked={args.stacked}
      >
        {data && (
          <>
            <TableCaption size={args.tableCaptionSize}>
              {data.title}
            </TableCaption>
            <TableHead>
              <TableRow>
                {data.labels &&
                  Object.keys(data.labels).map((key, index) => (
                    <TableHeadCell
                      key={key}
                      width={index === 0 && args.firstTableHeadCellWidth}
                      dataType={key === 'phone' && args.tableHeadCellDataType}
                    >
                      {data.labels[key]}
                    </TableHeadCell>
                  ))}
              </TableRow>
            </TableHead>
            <TableBody>
              {data.content &&
                data.content.map((item, index) => (
                  <TableRow
                    key={index}
                    highlight={index === 1 && args.tableRowHighlight === true}
                    color={index === 1 && args.tableRowColor}
                  >
                    <TableDataCell
                      data-label={data.labels.name}
                      maxWidthWithOverflow={
                        args.tableDataCellMaxWidthWithOverflow
                      }
                    >
                      {item.name}
                    </TableDataCell>
                    <TableDataCell
                      data-label={data.labels.role}
                      highlight={
                        index === 2 && args.tableCellHighlight === 'warning'
                          ? 'warning'
                          : index === 2 && args.tableCellHighlight === 'error'
                            ? 'error'
                            : undefined
                      }
                    >
                      {item.role}
                    </TableDataCell>
                    <TableDataCell data-label={data.labels.email}>
                      {item.email}
                    </TableDataCell>
                    <TableDataCell
                      data-label={data.labels.phone}
                      dataType={args.tableHeadCellDataType}
                    >
                      {item.phone}
                    </TableDataCell>
                    <TableDataCell data-label={data.labels.country}>
                      {item.country}
                    </TableDataCell>
                    <TableDataCell data-label={data.labels.active}>
                      {item.active ? 'Ναι' : 'Όχι'}
                    </TableDataCell>
                    <TableDataCell
                      maxWidthWithOverflow={
                        args.tableDataCellMaxWidthWithOverflow
                      }
                      data-label={data.labels.actions}
                    >
                      <Dropdown
                        float={args.actionsFloat}
                        align="right"
                        placement="bottom"
                      >
                        <DropdownButton variant="link">
                          Ενέργειες
                        </DropdownButton>
                        <DropdownContent>
                          <NavList layout="vertical">
                            <NavListItemAction href="#">
                              Εισαγωγή προτύπου
                            </NavListItemAction>
                            <NavListItemAction href="#">
                              Διαγραφή
                            </NavListItemAction>
                          </NavList>
                        </DropdownContent>
                      </Dropdown>
                    </TableDataCell>
                  </TableRow>
                ))}
            </TableBody>
          </>
        )}
      </Table>
    );
    return (
      <>
        {args.container === 'FloatingTable' ? (
          <TableFloatingScroll>
            <TableContent />
          </TableFloatingScroll>
        ) : (
          <TableContainer border={args.containerBorder}>
            <TableContent />
          </TableContainer>
        )}
      </>
    );
  },
  args: {
    actionsFloat: true,
    container: 'TableContainer',
    containerBorder: false,
    headerVariant: 'light',
    verticalBorders: false,
    variant: 'default',
    stacked: 'md',
    dense: false,
    tableCaptionSize: 'md',
    tableRowHighlight: false,
    tableCellHighlight: undefined,
    tableRowColor: 'primary',
    firstTableHeadCellWidth: '25%',
    tableHeadCellDataType: 'text',
    tableDataCellMaxWidthWithOverflow: false,
  },
  argTypes: {
    actionsFloat: {
      control: {
        type: 'boolean',
      },
    },
    container: {
      control: {
        type: 'inline-radio',
      },
      options: ['TableContainer', 'FloatingTable'],
    },
    containerBorder: {
      control: {
        type: 'boolean',
      },
    },
    headerVariant: {
      options: ['dark', 'light'],
      control: { type: 'inline-radio' },
    },
    verticalBorders: {
      control: {
        type: 'boolean',
      },
    },
    variant: {
      control: { type: 'inline-radio' },
      options: ['default', 'zebra'],
    },
    stacked: {
      control: {
        type: 'select',
      },
      options: ['always', 'sm', 'md', 'never'],
    },
    dense: {
      control: {
        type: 'boolean',
      },
    },
    tableCaptionSize: {
      control: {
        type: 'select',
      },
      options: ['sm', 'md', 'lg', 'xl'],
    },
    tableRowHighlight: {
      control: {
        type: 'boolean',
      },
    },
    tableCellHighlight: {
      control: {
        type: 'select',
      },
      options: [undefined, 'warning', 'error'],
    },
    tableRowColor: {
      control: {
        type: 'inline-radio',
      },
      options: ['primary', 'secondary'],
    },
    firstTableHeadCellWidth: {
      control: {
        type: 'select',
      },
      options: ['25%', '33.3%', '50%', '66.6%', '75%', '100%', 'full'],
    },
    tableHeadCellDataType: {
      control: {
        type: 'inline-radio',
      },
      options: ['numeric', 'text'],
    },
    tableDataCellMaxWidthWithOverflow: {
      control: {
        type: 'boolean',
      },
    },
  },
  parameters: {
    controls: { exclude: ['ref'] },
  },
};

export { Default } from '@digigov/ui/content/Table/__stories__/Default';
export { TableCaptions } from '@digigov/ui/content/Table/__stories__/TableCaptions';
export { NoData } from '@digigov/ui/content/Table/__stories__/NoData';
export { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';
export { ZebraProp } from '@digigov/ui/content/Table/__stories__/ZebraProp';
export { NumericDataType } from '@digigov/ui/content/Table/__stories__/NumericDataType';
export { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalBorders';
export { Stacked } from '@digigov/ui/content/Table/__stories__/Stacked';
export { DarkVariant } from '@digigov/ui/content/Table/__stories__/DarkVariant';
export { DarkVariantWithVerticalHeaders } from '@digigov/ui/content/Table/__stories__/DarkVariantWithVerticalHeaders';
export { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
export { DefinedWidth } from '@digigov/ui/content/Table/__stories__/DefinedWidth';
export { Dense } from '@digigov/ui/content/Table/__stories__/Dense';
export { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
export { UsingHighlights } from '@digigov/ui/content/Table/__stories__/UsingHighlights';
export { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';
export { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
export { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
export { WithMaxWidthWithOverflow } from '@digigov/ui/content/Table/__stories__/WithMaxWidthWithOverflow';
export { Full } from '@digigov/ui/content/Table/__stories__/Full';