import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';

import { Dropdown } from '../src';

import _ from 'lodash';

import iconToasterInfo from '../src/images/icon-trash-black.svg';

const data = [
  {
    id: 1,
    value: 'Value 1',
  },
  {
    id: 2,
    value: 'Value 2',
  },
  {
    id: 3,
    value: 'Value 3',
  },
  {
    id: 4,
    value: 'Value 4',
  },
  {
    id: 5,
    value: 'Value 5',
    isDisabled: true,
  },
  {
    id: 6,
    value: 'Value 6',
  },
  {
    id: 8,
    value: 'Value 8',
  },
  {
    id: 7,
    value: 'Value 7',
  },
  {
    id: 9,
    value:
      "Ceci est la valeur numéro neuf qui a pour but d'overflow. Si ce n'est pas le cas c'est que j'ai fais de la merde",
  },
  {
    id: 10,
    value: 'Value 10',
  },
  {
    id: 11,
    value: 'Value 11',
  },
  {
    id: 12,
    value: 'AAA',
  },
  {
    id: -1,
    value: 'Aucune',
  },
];

storiesOf('Dropdown', module).add('Single selection', () => {
  function Parent({ children }) {
    const [selectedItems, setSelectedItems] = useState([]);

    const onSelectionChange = (items) => {
      setSelectedItems(items);
    };

    return <div>{children(selectedItems, onSelectionChange)}</div>;
  }

  return (
    <Parent>
      {(selectedItems, onSelectionChange) => (
        <Dropdown
          items={data}
          selectedItems={selectedItems}
          onSelectionChange={onSelectionChange}
          placeholder="Please select an element"
        />
      )}
    </Parent>
  );
});

storiesOf('Dropdown', module).add(
  'Single selection with label sort by id',
  () => {
    function Parent({ children }) {
      const [selectedItems, setSelectedItems] = useState([]);

      const onSelectionChange = (items) => {
        setSelectedItems(items);
      };

      return <div>{children(selectedItems, onSelectionChange)}</div>;
    }

    return (
      <Parent>
        {(selectedItems, onSelectionChange) => (
          <Dropdown
            items={data}
            selectedItems={selectedItems}
            onSelectionChange={onSelectionChange}
            placeholder="Please select an element"
            label="Label :"
            sortBy={(itemsList) => {
              return _.sortBy(itemsList, 'id');
            }}
          />
        )}
      </Parent>
    );
  }
);

storiesOf('Dropdown', module).add(
  'Single selection with required label',
  () => {
    function Parent({ children }) {
      const [selectedItems, setSelectedItems] = useState([]);

      const onSelectionChange = (items) => {
        setSelectedItems(items);
      };

      return <div>{children(selectedItems, onSelectionChange)}</div>;
    }

    return (
      <Parent>
        {(selectedItems, onSelectionChange) => (
          <Dropdown
            items={data}
            selectedItems={selectedItems}
            onSelectionChange={onSelectionChange}
            placeholder="Please select an element"
            label="Label :"
            isRequired={true}
          />
        )}
      </Parent>
    );
  }
);

storiesOf('Dropdown', module).add(
  'Single selection with required label disabled without values',
  () => {
    function Parent({ children }) {
      const [selectedItems, setSelectedItems] = useState([]);

      const onSelectionChange = (items) => {
        setSelectedItems(items);
      };

      return <div>{children(selectedItems, onSelectionChange)}</div>;
    }

    return (
      <Parent>
        {(selectedItems, onSelectionChange) => (
          <Dropdown
            items={data}
            selectedItems={selectedItems}
            onSelectionChange={onSelectionChange}
            placeholder="Please select an element"
            isDisabled={true}
            label="Label :"
            isRequired={true}
          />
        )}
      </Parent>
    );
  }
);

storiesOf('Dropdown', module).add('Single selection with icon', () => {
  function Parent({ children }) {
    const [selectedItems, setSelectedItems] = useState([]);

    const onSelectionChange = (items) => {
      setSelectedItems(items);
    };

    return <div>{children(selectedItems, onSelectionChange)}</div>;
  }

  return (
    <Parent>
      {(selectedItems, onSelectionChange) => (
        <Dropdown
          items={data}
          iconSrc={iconToasterInfo}
          selectedItems={selectedItems}
          onSelectionChange={onSelectionChange}
          placeholder="Please select an element"
        />
      )}
    </Parent>
  );
});

storiesOf('Dropdown', module).add('Single selection with icon disabled', () => {
  function Parent({ children }) {
    const [selectedItems, setSelectedItems] = useState([]);

    const onSelectionChange = (items) => {
      setSelectedItems(items);
    };

    return <div>{children(selectedItems, onSelectionChange)}</div>;
  }

  return (
    <Parent>
      {(selectedItems, onSelectionChange) => (
        <Dropdown
          items={data}
          iconSrc={iconToasterInfo}
          selectedItems={selectedItems}
          onSelectionChange={onSelectionChange}
          isDisabled={true}
          placeholder="Please select an element"
        />
      )}
    </Parent>
  );
});

storiesOf('Dropdown', module).add('Single selection without search bar', () => {
  function Parent({ children }) {
    const [selectedItems, setSelectedItems] = useState([]);

    const onSelectionChange = (items) => {
      setSelectedItems(items);
    };

    return <div>{children(selectedItems, onSelectionChange)}</div>;
  }

  return (
    <Parent>
      {(selectedItems, onSelectionChange) => (
        <Dropdown
          items={data}
          isSearchDisabled={true}
          selectedItems={selectedItems}
          onSelectionChange={onSelectionChange}
          placeholder="Please select an element"
        />
      )}
    </Parent>
  );
});

storiesOf('Dropdown', module).add(
  'Single selection with value disabled',
  () => {
    function Parent({ children }) {
      const [selectedItems, setSelectedItems] = useState([
        {
          id: 4,
          value: 'Value 4',
        },
      ]);

      const onSelectionChange = (items) => {
        setSelectedItems(items);
      };

      return <div>{children(selectedItems, onSelectionChange)}</div>;
    }

    return (
      <Parent>
        {(selectedItems, onSelectionChange) => (
          <Dropdown
            items={data}
            isSearchDisabled={false}
            selectedItems={selectedItems}
            onSelectionChange={onSelectionChange}
            placeholder="Please select an element"
            isDisabled={true}
          />
        )}
      </Parent>
    );
  }
);

storiesOf('Dropdown', module).add('Single selection with button', () => {
  const button = {
    id: 1,
    text: 'Create category',
    handleClick: () => {
      console.log('Coucou');
    },
    iconSrc: iconToasterInfo,
  };

  function Parent({ children }) {
    const [selectedItems, setSelectedItems] = useState([]);

    const onSelectionChange = (items) => {
      setSelectedItems(items);
    };

    return <div>{children(selectedItems, onSelectionChange)}</div>;
  }

  return (
    <Parent>
      {(selectedItems, onSelectionChange) => (
        <Dropdown
          items={data}
          selectedItems={selectedItems}
          onSelectionChange={onSelectionChange}
          placeholder="Please select an element"
          button={button}
        />
      )}
    </Parent>
  );
});

storiesOf('Dropdown', module).add(
  'Single selection with disabled button',
  () => {
    const button = {
      id: 1,
      text: 'Create category',
      handleClick: () => {
        console.log('Coucou');
      },
      iconSrc: iconToasterInfo,
      isDisabled: true,
    };

    function Parent({ children }) {
      const [selectedItems, setSelectedItems] = useState([]);

      const onSelectionChange = (items) => {
        setSelectedItems(items);
      };

      return <div>{children(selectedItems, onSelectionChange)}</div>;
    }

    return (
      <Parent>
        {(selectedItems, onSelectionChange) => (
          <Dropdown
            items={data}
            selectedItems={selectedItems}
            onSelectionChange={onSelectionChange}
            placeholder="Please select an element"
            button={button}
          />
        )}
      </Parent>
    );
  }
);

storiesOf('Dropdown', module).add('Single selection with custom render', () => {
  function Parent({ children }) {
    const [selectedItems, setSelectedItems] = useState([]);

    const onSelectionChange = (items) => {
      setSelectedItems(items);
    };

    return <div>{children(selectedItems, onSelectionChange)}</div>;
  }

  const data = [
    {
      id: 1,
      value: 'value 1',
      renderValue: () => (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontSize: '14px' }}>{'value 1'}</div>
          <div style={{ fontSize: '12px' }}>{'little hint'}</div>
          <div style={{ fontSize: '10px' }}>{'I AM THE BEST'}</div>
        </div>
      ),
    },
    {
      id: 2,
      value: 'value 2',
      renderValue: () => (
        <div>
          <div>{'value 2'}</div>
          <div>{'little hint'}</div>
        </div>
      ),
    },
    {
      id: 3,
      value: 'value 3',
      renderValue: () => (
        <div>
          <div>{'value 3'}</div>
          <div>{'little hint'}</div>
        </div>
      ),
    },
    {
      id: 4,
      value: 'value 4',
      renderValue: () => (
        <div>
          <div>{'value 4'}</div>
          <div>{'little hint'}</div>
        </div>
      ),
    },
    {
      id: 5,
      value: 'value 5',
      renderValue: () => (
        <div>
          <div>{'value 5'}</div>
          <div>{'little hint'}</div>
        </div>
      ),
    },
  ];

  return (
    <Parent>
      {(selectedItems, onSelectionChange) => (
        <Dropdown
          items={data}
          selectedItems={selectedItems}
          onSelectionChange={onSelectionChange}
          placeholder="Please select an element"
        />
      )}
    </Parent>
  );
});

storiesOf('Dropdown', module).add('Multiple selection', () => {
  function Parent({ children }) {
    const [selectedItems, setSelectedItems] = useState([]);

    const onSelectionChange = (items) => {
      setSelectedItems(items);
    };

    return <div>{children(selectedItems, onSelectionChange)}</div>;
  }

  return (
    <Parent>
      {(selectedItems, onSelectionChange) => (
        <Dropdown
          items={data}
          isUniqueSelection={false}
          selectedItems={selectedItems}
          onSelectionChange={onSelectionChange}
          placeholder="Please select one or several element"
        />
      )}
    </Parent>
  );
});

storiesOf('Dropdown', module).add('Multiple selection with icon', () => {
  function Parent({ children }) {
    const [selectedItems, setSelectedItems] = useState([]);

    const onSelectionChange = (items) => {
      setSelectedItems(items);
    };

    return <div>{children(selectedItems, onSelectionChange)}</div>;
  }

  return (
    <Parent>
      {(selectedItems, onSelectionChange) => (
        <Dropdown
          items={data}
          isUniqueSelection={false}
          iconSrc={iconToasterInfo}
          selectedItems={selectedItems}
          onSelectionChange={onSelectionChange}
          placeholder="Please select an element"
        />
      )}
    </Parent>
  );
});

storiesOf('Dropdown', module).add(
  'Multiple selection without search bar',
  () => {
    function Parent({ children }) {
      const [selectedItems, setSelectedItems] = useState([]);

      const onSelectionChange = (items) => {
        setSelectedItems(items);
      };

      return <div>{children(selectedItems, onSelectionChange)}</div>;
    }

    return (
      <Parent>
        {(selectedItems, onSelectionChange) => (
          <Dropdown
            items={data}
            isSearchDisabled={true}
            isUniqueSelection={false}
            selectedItems={selectedItems}
            onSelectionChange={onSelectionChange}
            placeholder="Please select an element"
          />
        )}
      </Parent>
    );
  }
);

storiesOf('Dropdown', module).add('Multiple selection with button', () => {
  const button = {
    id: 1,
    text: 'Create category',
    handleClick: () => {
      console.log('Coucou');
    },
    iconSrc: iconToasterInfo,
  };

  function Parent({ children }) {
    const [selectedItems, setSelectedItems] = useState([]);

    const onSelectionChange = (items) => {
      setSelectedItems(items);
    };

    return <div>{children(selectedItems, onSelectionChange)}</div>;
  }

  return (
    <Parent>
      {(selectedItems, onSelectionChange) => (
        <Dropdown
          items={data}
          isUniqueSelection={false}
          selectedItems={selectedItems}
          onSelectionChange={onSelectionChange}
          placeholder="Please select one or several element"
          button={button}
        />
      )}
    </Parent>
  );
});

storiesOf('Dropdown', module).add(
  'Multiple selection with disabled button',
  () => {
    const button = {
      id: 1,
      text: 'Create category',
      handleClick: () => {
        console.log('Coucou');
      },
      iconSrc: iconToasterInfo,
      isDisabled: true,
    };

    function Parent({ children }) {
      const [selectedItems, setSelectedItems] = useState([]);

      const onSelectionChange = (items) => {
        setSelectedItems(items);
      };

      return <div>{children(selectedItems, onSelectionChange)}</div>;
    }

    return (
      <Parent>
        {(selectedItems, onSelectionChange) => (
          <Dropdown
            items={data}
            isUniqueSelection={false}
            selectedItems={selectedItems}
            onSelectionChange={onSelectionChange}
            placeholder="Please select one or several element"
            button={button}
          />
        )}
      </Parent>
    );
  }
);

storiesOf('Dropdown', module).add(
  'Multiple selection with custom render',
  () => {
    function Parent({ children }) {
      const [selectedItems, setSelectedItems] = useState([]);

      const onSelectionChange = (items) => {
        setSelectedItems(items);
      };

      return <div>{children(selectedItems, onSelectionChange)}</div>;
    }

    const data = [
      {
        id: 1,
        value: 'value 1',
        renderValue: () => (
          <div>
            <div>{'value 1'}</div>
            <div>{'little hint'}</div>
          </div>
        ),
      },
      {
        id: 2,
        value: 'value 2',
        renderValue: () => (
          <div>
            <div>{'value 2'}</div>
            <div>{'little hint'}</div>
          </div>
        ),
      },
      {
        id: 3,
        value: 'value 3',
        renderValue: () => (
          <div>
            <div>{'value 3'}</div>
            <div>{'little hint'}</div>
          </div>
        ),
      },
      {
        id: 4,
        value: 'value 4',
        renderValue: () => (
          <div>
            <div>{'value 4'}</div>
            <div>{'little hint'}</div>
          </div>
        ),
      },
      {
        id: 5,
        value: 'value 5',
        renderValue: () => (
          <div>
            <div>{'value 5'}</div>
            <div>{'little hint'}</div>
          </div>
        ),
      },
    ];

    return (
      <Parent>
        {(selectedItems, onSelectionChange) => (
          <Dropdown
            items={data}
            isUniqueSelection={false}
            selectedItems={selectedItems}
            onSelectionChange={onSelectionChange}
            placeholder="Please select an element"
          />
        )}
      </Parent>
    );
  }
);

storiesOf('Dropdown', module).add(
  'Multiple selection with custom render and without search bar',
  () => {
    function Parent({ children }) {
      const [selectedItems, setSelectedItems] = useState([]);

      const onSelectionChange = (items) => {
        setSelectedItems(items);
      };

      return <div>{children(selectedItems, onSelectionChange)}</div>;
    }

    const data = [
      {
        id: 1,
        value: 'value 1',
        renderValue: () => (
          <div>
            <div>{'value 1'}</div>
            <div>{'little hint'}</div>
          </div>
        ),
      },
      {
        id: 2,
        value: 'value 2',
        renderValue: () => (
          <div>
            <div>{'value 2'}</div>
            <div>{'little hint'}</div>
          </div>
        ),
      },
      {
        id: 3,
        value: 'value 3',
        renderValue: () => (
          <div>
            <div>{'value 3'}</div>
            <div>{'little hint'}</div>
          </div>
        ),
      },
      {
        id: 4,
        value: 'value 4',
        renderValue: () => (
          <div>
            <div>{'value 4'}</div>
            <div>{'little hint'}</div>
          </div>
        ),
      },
      {
        id: 5,
        value: 'value 5',
        renderValue: () => (
          <div>
            <div>{'value 5'}</div>
            <div>{'little hint'}</div>
          </div>
        ),
      },
    ];

    return (
      <Parent>
        {(selectedItems, onSelectionChange) => (
          <Dropdown
            items={data}
            isSearchDisabled={false}
            isUniqueSelection={false}
            selectedItems={selectedItems}
            onSelectionChange={onSelectionChange}
            placeholder="Please select an element"
          />
        )}
      </Parent>
    );
  }
);