import React from 'react';

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

import iconAdd from '../src/images/icon-add-blue.svg';
import iconSync from '../src/images/icon-sync.svg';
import iconPlus from '../src/images/icon-plus-white.svg';
import iconTrash from '../src/images/icon-trash-black.svg';
import iconFilter from '../src/images/header-filter.svg';

export default {
  title: 'Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Button',
};

export const Locked = Template.bind({});
Locked.args = {
  label: 'Button',
  color: 'locked',
};

export const Custom = Template.bind({});
Custom.args = {
  label: 'Ajouter un filtre',
  color: 'transparent-no-hover',
  fontSize: 16,
  icon: iconAdd,
  formatText: false,
  iconOnLeft: false,
  minWidth: 165,
  fontColor: '#626b7e',
  noBorder: true,
};

export const Animated = Template.bind({});
Animated.args = {
  label: 'Synchronisation en cours',
  color: 'inpulse-default',
  fontSize: 16,
  icon: iconSync,
  formatText: false,
  fontColor: '#ffffff',
  maxWidth: 300,
  noBorder: true,
  animation: { rotate: true },
  isDisabled: true,
  iconCustomStyle: { width: '20px', height: '20px' },
  handleClick: () => {},
};

export const Inpulse = () => {
  return (
    <div
      style={{
        height: 200,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}
    >
      <div
        style={{
          width: 175,
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        <Button
          handleClick={() => {}}
          color="inpulse-default"
          label="Label"
          fontSize={14}
          formatText={false}
        />
        <Button
          handleClick={() => {}}
          color="inpulse-default"
          label="Label"
          fontSize={14}
          formatText={false}
          isDisabled
        />
      </div>
      <div
        style={{
          width: 235,
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        <Button
          handleClick={() => {}}
          color="inpulse-default"
          label="Label"
          fontSize={14}
          formatText={false}
          icon={iconPlus}
        />
        <Button
          handleClick={() => {}}
          color="inpulse-default"
          label="Label"
          fontSize={14}
          formatText={false}
          icon={iconPlus}
          isDisabled
        />
      </div>
      <div
        style={{
          width: 175,
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        <Button
          handleClick={() => {}}
          color="inpulse-outline"
          label="Label"
          fontSize={14}
          formatText={false}
        />
        <Button
          handleClick={() => {}}
          color="inpulse-outline"
          label="Label"
          fontSize={14}
          formatText={false}
          isDisabled
        />
      </div>
      <div
        style={{
          width: 235,
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        <Button
          handleClick={() => {}}
          color="inpulse-outline"
          label="Label"
          fontSize={14}
          formatText={false}
          icon={iconTrash}
        />
        <Button
          handleClick={() => {}}
          color="inpulse-outline"
          label="Label"
          fontSize={14}
          formatText={false}
          icon={iconTrash}
          isDisabled
        />
      </div>
      <div
        style={{
          width: 175,
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        <Button
          handleClick={() => {}}
          color="inpulse-grey"
          label="Label"
          fontSize={14}
          formatText={false}
        />
        <Button
          handleClick={() => {}}
          color="inpulse-grey"
          label="Label"
          fontSize={14}
          formatText={false}
          isDisabled
        />
      </div>
      <div
        style={{
          width: 475,
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        <Button
          handleClick={() => {}}
          color="inpulse-filter"
          label="Filtrer la liste"
          icon={iconFilter}
          fontSize={14}
          formatText={false}
          height={40}
        />
        <Button
          handleClick={() => {}}
          color="inpulse-filter"
          label="Filtrer la liste"
          icon={iconFilter}
          fontSize={14}
          formatText={false}
          height={40}
          isDisabled
        />
        <Button
          handleClick={() => {}}
          color="inpulse-filter"
          label="Filtrer la liste"
          icon={iconFilter}
          fontSize={14}
          formatText={false}
          height={40}
          isActive
        />
      </div>
      <div
        style={{
          width: 235,
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        <Button
          handleClick={() => {}}
          color="inpulse-link"
          label="Label"
          fontSize={14}
          icon={iconTrash}
          iconOnLeft={false}
        />
        <Button
          handleClick={() => {}}
          color="inpulse-link"
          label="Label"
          fontSize={14}
          icon={iconTrash}
          iconOnLeft={false}
          isDisabled
        />
      </div>
    </div>
  );
};

export const CountDot = Template.bind({});
CountDot.args = {
  icon:'static/media/src/images/icon-plus-white.svg',
  count: 73,
};

export const OnlyIcon = Template.bind({});
OnlyIcon.args = {
  icon: iconPlus,
};