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

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

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

export function Example() {
  return (
    <div className="flex w-1/4 justify-center py-12">
      <Switch />
    </div>
  );
}

export const Uncontrolled = () => {
  return (
    <div className="flex w-1/4 justify-center py-12">
      <Switch defaultChecked={true} />
    </div>
  );
};

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

  return (
    <div className="flex w-1/4 justify-center py-12">
      <Switch checked={checked} onCheckedChange={c => setChecked(c)} />
    </div>
  );
}

export const WithLabel = () => {
  return (
    <div className="flex px-14 py-12 gap-2 items-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 className="flex flex-col px-14 py-12 gap-2 ">
      <div className="flex mb-9 items-center space-x-2">
        <Switch id="disabled-c1" defaultChecked={true} disabled />
        <Label htmlFor="disabled-c1">Apply price list to all products</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Switch id="disabled-c2" defaultChecked={false} disabled />
        <Label htmlFor="disabled-c2">Apply price list to all products</Label>
      </div>
    </div>
  );
};
