import Checkbox from '@/lib/components/Checkbox';
import {
  appearanceOptions,
  commonArgTypes,
  radiusOptions,
  scalingOptions,
  sizeOptions
} from '@/lib/constants';
import type { Meta } from '@storybook/vue3';

const meta = {
  title: 'Select Component/Checkbox',
  component: Checkbox,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: '옵션을 끄거나 켤 수 있는 입력 요소로 선택지 중 다중 선택할 수 있는 기능'
      }
    }
  },
  argTypes: {
    scaling: {
      ...commonArgTypes.scaling,
      description: '체크박스 비율'
    },
    size: {
      ...commonArgTypes.size,
      table: {
        category: 'Props',
        type: {
          summary: sizeOptions
            .filter((option) => option !== 'x-small' && option !== 'x-large')
            .join(' | ')
        }
      },
      options: sizeOptions.filter((option) => option !== 'x-small' && option !== 'x-large'),
      description: '체크박스 크기'
    },
    radius: {
      ...commonArgTypes.radius,
      description: '체크박스 둥글기'
    },
    color: {
      ...commonArgTypes.color,
      description: '체크박스 메인 색'
    },
    appearance: {
      ...commonArgTypes.appearance,
      description: '체크박스 스타일',
      table: {
        category: 'Props',
        type: {
          summary: appearanceOptions
            .filter((option) => option !== 'ghost' && option !== 'outline' && option !== 'solid')
            .join(' | ')
        }
      },
      options: appearanceOptions.filter(
        (option) => option !== 'ghost' && option !== 'outline' && option !== 'solid'
      )
    },
    disabled: {
      description: '체크박스 disabled 기본 속성',
      defaultValue: { summary: 'false' },
      table: {
        category: 'Props',
        type: { summary: 'boolean' }
      },
      control: { type: 'boolean' }
    },
    checked: {
      table: {
        disable: true
      }
    },
    defaultChecked: {
      table: {
        disable: true
      }
    },
    indeterminate: {
      table: {
        disable: true
      }
    }
  },
  args: {}
} as Meta;

export default meta;

export const Default = {
  render: (args: any) => ({
    components: {
      Checkbox
    },
    setup() {
      return { args };
    },
    template: `<Checkbox v-bind='args' id="default-checkbox" defaultChecked>체크박스</Checkbox>`
  })
};

export const Indeterminate = {
  render: (args: any) => ({
    components: {
      Checkbox
    },
    setup() {
      return { args };
    },
    template: `<Checkbox v-bind='args' id="indeterminate-checkbox" indeterminate defaultChecked>indeterminateCheckbox</Checkbox>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Checkbox id="indeterminate-checkbox" indeterminate defaultChecked>indeterminateCheckbox</Checkbox>
</template>
        `
      }
    }
  }
};

export const Disabled = {
  render: (args: any) => ({
    components: {
      Checkbox
    },
    setup() {
      return { args };
    },
    template: `
    <div className="flex items-center gap-5">
      <Checkbox v-bind='args' id="disabled-checkbox" disabled defaultChecked>disabledChecked</Checkbox>
      <Checkbox v-bind='args' id="disabled-unchecked-checkbox" disabled>disabledUnChecked</Checkbox>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Checkbox id="disabled-checkbox" disabled defaultChecked>disabledChecked</Checkbox>
  <Checkbox id="disabled-unchecked-checkbox" disabled>disabledUnChecked</Checkbox>
</template>
        `
      }
    }
  }
};

export const Checked = {
  render: (args: any) => ({
    components: {
      Checkbox
    },
    setup() {
      return { args };
    },
    template: `
    <div className="flex items-center gap-5">
      <Checkbox v-bind='args' id="checked-checkbox" :checked='true'>checked</Checkbox>
      <Checkbox v-bind='args' id="unchecked-checkbox" :checked="false">unchecked</Checkbox>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Checkbox id="checked-checkbox" :checked="true">checked</Checkbox>
  <Checkbox id="unchecked-checkbox" :checked="false">unchecked</Checkbox>
</template>
        `
      }
    }
  }
};

export const Color = {
  render: (args: any) => ({
    components: {
      Checkbox
    },
    setup() {
      return { args, colorOptions: ['yellow', 'blue', 'violet', 'ruby'] };
    },
    template: `
    <div className="flex items-center gap-5">
      <template v-for="color in colorOptions" :key="color">
        <Checkbox :id="color" v-bind='args' defaultChecked :color="color">{{ color }}</Checkbox>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Checkbox id="yellow-checkbox" defaultChecked :color="yellow">yellow</Checkbox>
  <Checkbox id="blue-checkbox" defaultChecked :color="blue">blue</Checkbox>
  <Checkbox id="violet-checkbox" defaultChecked :color="violet">violet</Checkbox>
  <Checkbox id="ruby-checkbox" defaultChecked :color="ruby">ruby</Checkbox>
</template>
        `
      }
    }
  }
};

export const Radius = {
  render: (args: any) => ({
    components: {
      Checkbox
    },
    setup() {
      return { args, radiusOptions };
    },
    template: `
    <div className="flex items-center gap-5">
      <template v-for="radius in radiusOptions" :key="radius">
        <Checkbox :id="radius" v-bind='args' :defaultChecked="true" :radius="radius">{{ radius }}</Checkbox>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Checkbox id="none-checkbox" defaultChecked :radius="none">none</Checkbox>
  <Checkbox id="small-checkbox" defaultChecked :radius="small">small</Checkbox>
  <Checkbox id="medium-checkbox" defaultChecked :radius="medium">medium</Checkbox>
  <Checkbox id="large-checkbox" defaultChecked :radius="large">large</Checkbox>
  <Checkbox id="full-checkbox" defaultChecked :radius="full">full</Checkbox>
</template>
        `
      }
    }
  }
};

export const Scaling = {
  render: (args: any) => ({
    components: {
      Checkbox
    },
    setup() {
      return { args, scalingOptions };
    },
    template: `
    <div className="flex items-center gap-5">
      <template v-for="scaling in scalingOptions" :key="scaling">
        <Checkbox :id="scaling" v-bind='args' :defaultChecked="true" :scaling="scaling">{{ scaling }}</Checkbox>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Checkbox id="90%-checkbox" defaultChecked :scaling="90%">90%</Checkbox>
  <Checkbox id="95%-checkbox" defaultChecked :scaling="95%">95%</Checkbox>
  <Checkbox id="100%-checkbox" defaultChecked :scaling="100%">100%</Checkbox>
  <Checkbox id="105%-checkbox" defaultChecked :scaling="105%">105%</Checkbox>
  <Checkbox id="110%-checkbox" defaultChecked :scaling="110%">110%</Checkbox>
</template>
        `
      }
    }
  }
};

export const Appearance = {
  render: (args: any) => ({
    components: {
      Checkbox
    },
    setup() {
      return { args, appearanceOptions: ['surface', 'classic', 'soft'] };
    },
    template: `
    <div className="flex items-center gap-5">
      <template v-for="appearance in appearanceOptions" :key="appearance">
        <div className="flex flex-col gap-3">
          <Checkbox :id="\`\${appearance}-checked\`" v-bind='args' :defaultChecked="true" :appearance="appearance">{{ appearance }}-checked</Checkbox>
          <Checkbox :id="\`\${appearance}-unchecked\`" v-bind='args' :defaultChecked="false" :appearance="appearance">{{ appearance }}-unchecked</Checkbox>
        </div>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Checkbox id="surface-checkbox" :appearance="surface">surface</Checkbox>
  <Checkbox id="classic-checkbox" :appearance="classic">classic</Checkbox>
  <Checkbox id="soft-checkbox" :appearance="soft">soft</Checkbox>
</template>
        `
      }
    }
  }
};

export const Size = {
  render: (args: any) => ({
    components: {
      Checkbox
    },
    setup() {
      return { args, sizeOptions: ['small', 'medium', 'large'] };
    },
    template: `
    <div className="flex items-center gap-5">
      <template v-for="size in sizeOptions" :key="size">
        <Checkbox :id="\`\${size}-size\`" v-bind='args' :defaultChecked="true" :size="size">{{ size }}</Checkbox>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Checkbox id="small-checkbox" defaultChecked :size="small">small</Checkbox>
  <Checkbox id="medium-checkbox" defaultChecked :size="medium">medium</Checkbox>
  <Checkbox id="large-checkbox" defaultChecked :size="large">large</Checkbox>
</template>
        `
      }
    }
  }
};