import React from 'react';
import styled from 'styled-components';
import Switch from './index';

const Wrapper = styled.div`
  margin: auto;
  max-width: 220px;
`;

export default {
  title: 'Core/Controls/Switch',
  component: Switch
};

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

export const Default = Template.bind({});
Default.args = {
  active: false,
  large: false,
  label: '',
  offText: '',
  onText: ''
};

export const DefaultActive = Template.bind({});
DefaultActive.args = {
  active: true,
  large: false,
  label: '',
  offText: '',
  onText: ''
};

export const DefaultWithLabel = Template.bind({});
DefaultWithLabel.args = {
  active: true,
  large: false,
  label: 'With Label',
  offText: '',
  onText: ''
};

export const DefaultWithLabelAndText = Template.bind({});
DefaultWithLabelAndText.args = {
  active: true,
  large: false,
  label: 'With Label',
  offText: 'Off',
  onText: 'On'
};

export const Large = Template.bind({});
Large.args = {
  active: false,
  large: true,
  label: '',
  offText: '',
  onText: ''
};

export const LargeActive = Template.bind({});
LargeActive.args = {
  active: true,
  large: true,
  label: '',
  offText: '',
  onText: ''
};

export const LargeWithLabel = Template.bind({});
LargeWithLabel.args = {
  active: true,
  large: true,
  label: 'With Label',
  offText: '',
  onText: ''
};

export const LargeWithLabelAndText = Template.bind({});
LargeWithLabelAndText.args = {
  active: true,
  large: true,
  label: 'With Label',
  offText: 'Off',
  onText: 'On'
};