import React from 'react';

import ListView from '../src/ListView';
import Button from '../src/Button';

export default {
  title: 'ListView',
  component: ListView,
  parameters: {
    layout: 'fullscreen',
    backgrounds: {
      default: 'deepsight-grey',
      values: [{ name: 'deepsight-grey', value: '#F2F4F8' }],
    },
  },
};

const renderEmptyState = () => {
  return (
    <div
      style={{
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <div>Empty List</div>
    </div>
  );
};

const columns = [
  {
    id: 0,
    name: 'Nom',
    propertyKey: 'name',
    large: true,
    render: (value) => (
      <a href="#" style={{ color: '#1D1D1B', textDecoration: 'none' }}>
        {value}
      </a>
    ),
  },
  {
    id: 1,
    name: 'Marque',
    propertyKey: 'brand',
    excludeFromSearch: true,
    large: true,
    render: (value) => (
      <div
        style={{
          background: '#E8E8E8',
          borderRadius: '3px',
          padding: '6px 10px',
        }}
      >
        {value}
      </div>
    ),
  },
  {
    id: 2,
    name: 'Identifiant',
    propertyKey: 'identifier',
    render: (value) => <div style={{ fontWeight: 700 }}>{value}</div>,
  },
  {
    id: 3,
    name: 'Ville',
    propertyKey: 'city',
  },
];

const data = [
  {
    id: 'e5cb1850-4b89-47c5-b79d-d72957ed86ab',
    name: 'Angers',
    brand: 'Nikuro Passion',
    identifier: 'NK1',
    city: 'Angers',
  },
  {
    id: 'ba5f20ec-58f0-4bd7-b32a-dca41c56d36d',
    name: 'Lyon 1er',
    brand: 'Nikuro Passion',
    identifier: 'NK4',
    city: 'Lyon',
  },
  {
    id: 'cd1a54ba-feac-46c0-a39e-92881244ba25',
    name: 'Marseille',
    brand: 'Nikuro Evasion',
    identifier: 'NK6',
    city: 'Marseille',
  },
  {
    id: 'e5cb1850-4b89-47c5-b79d-d72957ed86ac',
    name: 'Paris 1',
    brand: 'Nikuro Passion',
    identifier: 'NK3',
    city: 'Paris',
  },
  {
    id: 'e5cb1850-4b89-47c5-b79d-d72957ed86ad',
    name: 'Paris 2',
    brand: 'Nikuro Evasion',
    identifier: 'NK4',
    city: 'Paris',
  },
  {
    id: 'e5cb1850-4b89-47c5-b79d-d72957ed86ae',
    name: 'Paris 3',
    brand: 'Nikuro Passion',
    identifier: 'NK4',
    city: 'Paris',
  },
  {
    id: 'e5cb1850-4b89-47c5-b79d-d72957ed86af',
    name: 'Lyon 2',
    brand: 'Nikuro Evasion',
    identifier: 'NK5',
    city: 'Lyon',
  },
  {
    id: 'e5cb1850-4b89-47c5-b79d-d72957ed86a1',
    name: 'Lille',
    brand: 'Nikuro Passion',
    identifier: 'NK2',
    city: 'Lille',
  },
  {
    id: 'e5cb1850-4b89-47c5-b79d-d72957ed86a2',
    name: 'Paris 4',
    brand: 'Nikuro Evasion',
    identifier: 'NK8',
    city: 'Paris',
  },
  {
    id: 'e5cb1850-4b89-47c5-b79d-d72957ed86a3',
    name: 'Lille 2',
    brand: 'Nikuro Passion',
    identifier: 'NK7',
    city: 'Lille',
  },
  {
    id: 'e5cb1850-4b89-47c5-b79d-d72957ed86a4',
    name: 'Londres',
    brand: 'Nikuro Evasion',
    identifier: 'NK3',
    city: 'Londres',
  },
];

const Template = (args) => (
  <div style={{ height: '100vh', overflow: 'hidden' }}>
    <ListView {...args} />
  </div>
);

export const Empty = Template.bind({});
Empty.args = {
  columns,
  data: [],
  renderEmptyState,
  padding: '20px 20px 32px 20px',
};

export const Loading = Template.bind({});
Loading.args = {
  columns,
  data: [],
  isLoading: true,
  padding: '20px 20px 32px 20px',
};

export const Primary = Template.bind({});
Primary.args = {
  columns,
  data,
  actions: [
    {
      actionLabel: 'Associer à un produit Deepsight',
      displayActionInLine: true,
      atLeastOneSelected: true,
      handleAction: (items) =>
        window.alert(
          `Associate to a deepsight product -> number of items: ${items.length}`
        ),
      render: (label, action) => (
        <Button
          key={`button-${label}`}
          formatText={false}
          label={label}
          color="inpulse-default"
          handleClick={action}
        />
      ),
    },
    {
      actionLabel: 'Exclure',
      displayActionInLine: true,
      atLeastOneSelected: true,
      handleAction: (items) =>
        window.alert(`Exclude -> number of items: ${items.length}`),
    },
    {
      actionLabel: 'Action 3',
      displayActionInLine: true,
      multipleSelected: true,
      handleAction: (items) =>
        window.alert(`Action 3 -> number of items: ${items.length}`),
    },
    {
      actionLabel: 'Action 4',
      displayActionInLine: true,
      multipleSelected: true,
      handleAction: (items) =>
        window.alert(`Action 4 -> number of items: ${items.length}`),
    },
    {
      actionLabel: 'Example of a long action in dropdown',
      atLeastOneSelected: true,
      handleAction: (items) =>
        window.alert(
          `Example of a long action in dropdown -> number of items: ${items.length}`
        ),
    },
  ],
  rowActions: [
    {
      actionLabel: () => 'Associer à un produit Deepsight',
      handleAction: (item) => window.alert(`associate -> item: ${item.name}`),
    },
    {
      actionLabel: () => 'Supprimer',
      handleAction: (item) => window.alert(`delete -> item: ${item.name}`),
    },
  ],
  renderEmptyState,
  exportFunction: () => window.alert(`export`),
  placeholderShape: 'Client',
  placeholderShapePlural: 'Clients',
  padding: '20px 20px 32px 20px',
  countElements: data.length,
  queryParams: null,
  onQueryParamsChange: null,
};

export const ActionOnHover = Template.bind({});
ActionOnHover.args = {
  padding: '20px 20px 0px 20px',
  columns,
  data,
  countElements: data.length,
  queryParams: null,
  onQueryParamsChange: null,
  actionsOnHover: (item) => {
    return [
      {
        icon: './images/icon-check-mark-blue.svg',
        handleAction: (item, index) =>
          window.alert(
            `Button click \'validate\' -> name: ${item.name}, index: ${index}`
          ),
      },
      {
        icon: './images/icon-close-cross.svg',
        iconOnHover: './images/icon-close-cross-red.svg',
        handleAction: (item, index) =>
          window.alert(
            `Button click \'delete\' -> name: ${item.name}, index: ${index}`
          ),
      },
    ];
  },
  actionOnClick: (item, index) =>
    window.alert(
      `Action on click of a row -> name: ${item.name}, index: ${index}`
    ),
};