import { useState } from 'react';
import type { Meta } from '@storybook/react';

import { Switch } from '.';
import { Label } from '../label';

const style = { display: 'flex', paddingTop: '3rem', paddingBottom: '3rem', justifyContent: 'center', width: '25%' };

export default {
  title: 'Components/Switch',
  parameters: {
    default: 'gray',
  },
} as Meta<typeof Switch>;

export function Example() {
  return (
    <div style={style}>
      <Switch />
    </div>
  );
}

export const Uncontrolled = () => {
  return (
    <div style={style}>
      <Switch defaultChecked={true} />
    </div>
  );
};

export function Controlled() {
  const [checked, setChecked] = useState(false);

  return (
    <div style={style}>
      <Switch checked={checked} onCheckedChange={c => setChecked(c)} />
    </div>
  );
}

export const WithLabel = () => {
  return (
    <div style={{ display: 'flex', padding: '3rem', gap: '0.5rem', alignItems: 'center' }}>
      <Switch id="with-label-c1" defaultChecked={true} />
      <Label htmlFor="with-label-c1">Apply price list to all products</Label>
    </div>
  );
};

export const Disabled = () => {
  return (
    <div style={{ display: 'flex', padding: '3rem', gap: '0.5rem', alignItems: 'center' }}>
      <div style={{ display: 'flex', marginBottom: '2.25rem', alignItems: 'center' }}>
        <Switch id="disabled-c1" defaultChecked={true} disabled />
        <Label style={{ marginLeft: 4 }} htmlFor="disabled-c1">
          Apply price list to all products
        </Label>
      </div>
      <div style={{ display: 'flex', marginBottom: '2.25rem', alignItems: 'center' }}>
        <Switch id="disabled-c2" defaultChecked={false} disabled />
        <Label style={{ marginLeft: 4 }} htmlFor="disabled-c2">
          Apply price list to all products
        </Label>
      </div>
    </div>
  );
};
