import React from 'react';
import { Meta, Story } from '@storybook/react';
import { Button, OntwikProvider } from '../src';
import { ButtonProps } from '../src/interfaces';

const ExampleIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    fill="none"
    stroke="#fff"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <circle cx="12" cy="12" r="10" />
    <path d="M12 8v4M12 16h.01" />
  </svg>
);

const meta: Meta = {
  title: 'Button',
  component: Button,
  argTypes: {
    title: {
      name: 'title',
      type: { name: 'string', required: true },
      description: 'Button title',
      control: {
        type: 'text',
      },
    },
    variant: {
      name: 'variant',
      type: { name: 'string', required: false },
      description: 'Button variant',
      control: {
        type: 'select',
        options: ['primary', 'secondary', 'ghost'],
      },
    },
    size: {
      name: 'size',
      type: { name: 'string', required: false },
      description: 'Button size',
      control: {
        type: 'select',
        options: ['xlarge', 'large', 'medium', 'small'],
      },
    },
    state: {
      name: 'state',
      type: { name: 'string', required: false },
      description: 'Button state',
      control: {
        type: 'select',
        options: ['success', 'danger', 'warning', false],
      },
    },
    color: {
      name: 'color',
      type: { name: 'string', required: false },
      description: 'Button text color',
      control: {
        type: 'color',
      },
    },
    bg: {
      name: 'bg',
      type: { name: 'string', required: false },
      description: 'Button background color',
      control: {
        type: 'color',
      },
    },
    borderColor: {
      name: 'borderColor',
      type: { name: 'string', required: false },
      description: 'Button border color',
      control: {
        type: 'color',
      },
    },
    gradient1: {
      name: 'gradient 1',
      type: { name: 'string', required: false },
      description: 'Button Gradient',
      control: {
        type: 'color',
      },
    },
    gradient2: {
      name: 'gradient 2',
      type: { name: 'string', required: false },
      description: 'Button Gradient',
      control: {
        type: 'color',
      },
    },
    disabled: {
      name: 'disabled',
      type: { name: 'boolean', required: false },
      description: 'Button disabled',
      control: {
        type: 'inline-radio',
        options: [true, false],
      },
    },
    wide: {
      name: 'wide',
      type: { name: 'boolean', required: false },
      description: 'Button wide',
      control: {
        type: 'inline-radio',
        options: [true, false],
      },
    },
    uppercase: {
      name: 'uppercase',
      type: { name: 'boolean', required: false },
      description: 'Button text uppercase',
      control: {
        type: 'inline-radio',
        options: [true, false],
      },
    },
    icon: {
      name: 'icon',
      type: { name: 'string', required: false },
      description: 'Button icon',
      control: {
        type: 'inline-radio',
        options: [true, false],
      },
    },
    iconPosition: {
      name: 'iconPosition',
      type: { name: 'string', required: false },
      description: 'Button icon position',
      control: {
        type: 'inline-radio',
        options: ['right', 'left'],
      },
    },
    type: {
      name: 'type',
      type: { name: 'string', required: false },
      description: 'Button type',
      control: {
        type: 'select',
        options: ['button', 'submit', 'reset'],
      },
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template: Story<
  ButtonProps & {
    gradient1?: string;
    gradient2?: string;
  }
> = (args) => {
  const { gradient1, gradient2, icon, ...rest } = args;
  return (
    <OntwikProvider>
      {gradient1 && gradient2 ? (
        <Button
          {...rest}
          gradients={[gradient1, gradient2]}
          icon={<ExampleIcon />}
        />
      ) : icon ? (
        <Button {...rest} icon={<ExampleIcon />} />
      ) : (
        <Button {...rest} />
      )}
    </OntwikProvider>
  );
};

export const Primary = Template.bind({});
export const Secondary = Template.bind({});
export const Ghost = Template.bind({});

Primary.args = {
  variant: 'primary',
  size: 'large',
  title: 'Test',
  type: 'button',
};

Secondary.args = {
  variant: 'secondary',
  size: 'large',
  title: 'Test',
  type: 'button',
};

Ghost.args = {
  variant: 'ghost',
  size: 'large',
  title: 'Test',
  type: 'button',
};