import { Meta, StoryObj } from '@storybook/react-webpack5';
import Table from './Table';
import { TableHeaderType } from './TableHeader';
import { TableRowType, TableRowClickableType } from './TableRow';
import { DirectDebits } from '@transferwise/icons';

export default {
  component: Table,
  title: 'Content/Table',
} satisfies Meta<typeof Table>;

type Story = StoryObj<typeof Table>;

const tableData = {
  headers: [
    {
      header: 'Employee',
      width: '230px',
    },
    {
      header: 'Location',
    },
    {
      header: 'Employment Date',
      className: 'np-table-header--custom-class',
    },
    {
      header: 'Payment',
      alignment: 'right',
    },
    {
      header: 'Status',
      status: 'error',
    },
    {
      header: 'Card',
    },
  ] satisfies TableHeaderType[],
  rows: [
    {
      id: 0,
      cells: [
        {
          cell: {
            type: 'leading',
            primaryText: 'Bob Brown',
            secondaryText: 'Software Engineer',
            avatar: {
              profileName: 'Bob Brown',
              badge: {
                flagCode: 'GBP',
              },
            },
          },
        },
        {
          cell: {
            type: 'text',
            text: 'FR, Paris',
          },
        },
        {
          cell: {
            type: 'text',
            text: '11 Oct 2022',
          },
        },
        {
          cell: {
            type: 'currency',
            primaryCurrency: {
              amount: 12345.67,
              currency: 'eur',
            },
            secondaryCurrency: {
              amount: 11000.0,
              currency: 'gbp',
            },
          },
          alignment: 'right',
        },
        {
          cell: {
            type: 'status',
            primaryText: 'Cancelled',
            secondaryText: '1 day ago',
            sentiment: 'negative',
          },
        },
        {
          cell: {
            type: 'media',
            media: {
              src: '../wise-card.svg',
              alt: 'Wise Card',
              width: 48,
            },
            primaryText: '•••• 9204',
          },
        },
      ],
    },
    {
      id: 1,
      cells: [
        {
          cell: {
            type: 'leading',
            primaryText: 'Jan Kowalski',
            secondaryText: 'Product Manager',
            avatar: {
              asset: <DirectDebits />,
              badge: {
                status: 'warning',
              },
            },
          },
        },
        {
          cell: {
            type: 'text',
            text: 'US, New York',
          },
        },
        {
          cell: {
            type: 'text',
            text: '24 Jan 2024',
          },
        },
        {
          cell: {
            type: 'currency',
            flag: false,
            primaryCurrency: {
              amount: 23456.78,
              currency: 'usd',
            },
            secondaryCurrency: {
              amount: 21000.0,
              currency: 'gbp',
            },
          },
          alignment: 'right',
        },
        {
          cell: {
            type: 'status',
            primaryText: 'Scheduled',
            secondaryText: 'Tomorrow',
            sentiment: 'neutral',
          },
        },
        {
          cell: {
            type: 'media',
            media: {
              src: '../wise-card.svg',
              alt: 'Wise Card',
              width: 48,
            },
            primaryText: '•••• 9200',
          },
        },
      ],
    },
    {
      id: 2,
      cells: [
        {
          cell: {
            type: 'leading',
            primaryText: 'William Davis',
            secondaryText: 'Data Scientist',
            avatar: {
              profileName: 'William Davis',
              badge: {
                type: 'reference',
              },
            },
          },
        },
        {
          cell: {
            type: 'text',
            text: 'UK, London',
          },
        },
        {
          cell: {
            type: 'text',
            text: '9 Sept 2023',
          },
        },
        {
          cell: {
            type: 'currency',
            primaryCurrency: {
              amount: 34567.89,
              currency: 'gbp',
            },
            secondaryCurrency: {
              amount: 31000.0,
              currency: 'eur',
            },
          },
          alignment: 'right',
        },
        {
          cell: {
            type: 'status',
            primaryText: 'Paid',
            secondaryText: 'Yesterday',
            sentiment: 'positive',
          },
        },
        {
          cell: {
            type: 'media',
            media: {
              src: '../wise-card.svg',
              alt: 'Wise Card',
              width: 48,
            },
            primaryText: '•••• 9200',
          },
        },
      ],
    },
    {
      id: 3,
      cells: [
        {
          cell: {
            type: 'leading',
            primaryText: 'Jane Smith',
            secondaryText: 'IT Support Specialist',
            status: 'success',
            avatar: {
              src: 'avatar-square-dude.webp',
            },
          },
        },
        {
          cell: {
            type: 'text',
            text: 'NO, Oslo',
          },
        },
        {
          cell: {
            type: 'text',
            text: '12 Apr 2024',
            status: 'success',
          },
        },
        {
          cell: {
            type: 'currency',
            primaryCurrency: {
              amount: 45678.9,
              currency: 'nok',
            },
            secondaryCurrency: {
              amount: 41000.0,
              currency: 'gbp',
            },
            status: 'success',
          },
          alignment: 'right',
        },
        {
          cell: {
            type: 'status',
            primaryText: 'Overdue',
            secondaryText: '3 days ago',
            sentiment: 'warning',
          },
        },
        {
          cell: {
            type: 'media',
            media: {
              src: '../wise-card.svg',
              alt: 'Wise Card',
              width: 48,
            },
            primaryText: '•••• 9200',
          },
        },
      ],
    },
    {
      id: 4,
      cells: [
        {
          cell: {
            type: 'leading',
            primaryText: 'Alice Johnson',
            secondaryText: 'Frontend Developer',
            status: 'error',
            avatar: {
              src: 'avatar-square-dude.webp',
            },
          },
        },
        {
          cell: {
            type: 'text',
            text: 'JP, Tokyo',
          },
        },
        {
          cell: {
            type: 'text',
            text: '27 Nov 2023',
            status: 'error',
          },
        },
        {
          cell: {
            type: 'currency',
            primaryCurrency: {
              amount: 56789.01, // JPY currency's value is always cropped to zero decimals, you'll see `56789` instead of `56789.01` in screen/tests
              currency: 'jpy',
            },
            secondaryCurrency: {
              amount: 51000.0,
              currency: 'gbp',
            },
            status: 'error',
          },
          alignment: 'right',
        },
        {
          cell: {
            type: 'status',
            primaryText: 'Overdue',
            secondaryText: '6 days ago',
            sentiment: 'pending',
          },
        },
        {
          cell: {
            type: 'media',
            media: {
              src: '../wise-card.svg',
              alt: 'Wise Card',
              width: 48,
            },
            primaryText: '•••• 9200',
          },
        },
      ],
    },
  ] satisfies TableRowType[] | TableRowClickableType[],
};

export const Basic: Story = {
  args: {
    data: tableData,
  },
  render: (args) => {
    return <Table {...args} />;
  },
};

export const WithClickableRow: Story = {
  args: {
    data: {
      ...tableData,
      onRowClick: (rowData: TableRowType | TableRowClickableType) => {
        // eslint-disable-next-line no-console
        console.log(`Row clicked, data:`, rowData);
      },
    },
  },
  render: (args) => {
    return <Table {...args} />;
  },
};

export const WithLoading: Story = {
  args: {
    loading: true,
  },
};

export const WithEmptyData: Story = {
  args: {
    data: {
      headers: tableData.headers,
      rows: [],
    },
  },
};

export const WithError: Story = {
  args: {
    error: {
      message: 'Something went wrong during data fetching',
      action: {
        href: '/?path=/story/option-table--with-error',
        text: 'To Refresh page, click here',
      },
    },
  },
};

export const WithAFewColums: Story = {
  args: {
    data: {
      headers: tableData.headers
        .slice(0, 1)
        .concat(tableData.headers[3])
        .concat(tableData.headers[4]),
      rows: tableData.rows.map((row) => ({
        id: row.id,
        cells: row.cells.slice(0, 1).concat(row.cells[3]).concat(row.cells[4]),
      })),
    },
    fullWidth: false,
  },
};