import { Activity } from 'lucide-vue-next';
import { ref } from 'vue';
import BmsToggleIcon from './BmsToggleIcon.vue';

const WITH_DEFAULT_SLOT = {
  default: '<Activity/>',
};

export default {
  title: 'Composants/button/ToggleIcon',
  component: BmsToggleIcon,
  tags: ['with_useable_code'],
  argTypes: {
    modelValue: {
      control: { type: 'boolean' },
    },
    disabled: {
      control: { type: 'boolean' },
    },
    small: {
      control: { type: 'boolean' },
    },
  },
};

const Template = (args) => ({
  components: {
    BmsToggleIcon,
    Activity,
  },
  setup() {
    const modelValue = ref(args.modelValue ?? false);
    const modelValueSmall = ref(args.modelValue ?? false);
    return { args, modelValue, modelValueSmall };
  },
  template: `
    <div style="display: flex; flex-direction: column; gap: 24px; padding: 16px;">
      <div style="display: flex; flex-direction: column; gap: 8px;">
        <b>Normal</b>
        <div style="display: flex; gap: 16px; align-items: center;">
          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
            <b style="font-size: 12px;">Default (cliquable)</b>
            <BmsToggleIcon v-model="modelValue"><Activity/></BmsToggleIcon>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
            <b style="font-size: 12px;">Disable Default</b>
            <BmsToggleIcon :model-value="false" :disabled="true"><Activity/></BmsToggleIcon>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
            <b style="font-size: 12px;">Hover</b>
            <BmsToggleIcon :model-value="false" class="_hover"><Activity/></BmsToggleIcon>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
            <b style="font-size: 12px;">Actif</b>
            <BmsToggleIcon :model-value="true"><Activity/></BmsToggleIcon>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
            <b style="font-size: 12px;">Disable Actif</b>
            <BmsToggleIcon :model-value="true" :disabled="true"><Activity/></BmsToggleIcon>
          </div>
        </div>
      </div>
      <div style="display: flex; flex-direction: column; gap: 8px;">
        <b>Small</b>
        <div style="display: flex; gap: 16px; align-items: center;">
          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
            <b style="font-size: 12px;">Default (cliquable)</b>
            <BmsToggleIcon v-model="modelValueSmall" small><Activity/></BmsToggleIcon>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
            <b style="font-size: 12px;">Disable Default</b>
            <BmsToggleIcon :model-value="false" small :disabled="true"><Activity/></BmsToggleIcon>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
            <b style="font-size: 12px;">Hover</b>
            <BmsToggleIcon :model-value="false" small class="_hover"><Activity/></BmsToggleIcon>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
            <b style="font-size: 12px;">Actif</b>
            <BmsToggleIcon :model-value="true" small><Activity/></BmsToggleIcon>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
            <b style="font-size: 12px;">Disable Actif</b>
            <BmsToggleIcon :model-value="true" small :disabled="true"><Activity/></BmsToggleIcon>
          </div>
        </div>
      </div>
    </div>
  `,
});

export const ToggleIcon = Template.bind({});
ToggleIcon.args = { ...WITH_DEFAULT_SLOT };

export const Default = () => ({
  components: { BmsToggleIcon, Activity },
  template: '<BmsToggleIcon><Activity/></BmsToggleIcon>',
});

export const DisableDefault = () => ({
  components: { BmsToggleIcon, Activity },
  template: '<BmsToggleIcon :disabled="true"><Activity/></BmsToggleIcon>',
});

export const Hover = () => ({
  components: { BmsToggleIcon, Activity },
  template: '<BmsToggleIcon class="_hover"><Activity/></BmsToggleIcon>',
});

export const Actif = () => ({
  components: { BmsToggleIcon, Activity },
  template: '<BmsToggleIcon :model-value="true"><Activity/></BmsToggleIcon>',
});

export const DisableActif = () => ({
  components: { BmsToggleIcon, Activity },
  template:
    '<BmsToggleIcon :model-value="true" :disabled="true"><Activity/></BmsToggleIcon>',
});

export const Small = () => ({
  components: { BmsToggleIcon, Activity },
  template: '<BmsToggleIcon small><Activity/></BmsToggleIcon>',
});

export const SmallActive = () => ({
  components: { BmsToggleIcon, Activity },
  template:
    '<BmsToggleIcon small :model-value="true"><Activity/></BmsToggleIcon>',
});

export const WithVModel = () => ({
  components: { BmsToggleIcon, Activity },
  setup() {
    const isActive = ref(false);
    return { isActive };
  },
  template: `
    <div style="display: flex; flex-direction: column; gap: 16px; padding: 16px;">
      <BmsToggleIcon v-model="isActive"><Activity/></BmsToggleIcon>
      <p>État actif : {{ isActive }}</p>
      <button @click="isActive = !isActive" style="padding: 8px;">Toggle depuis l'extérieur</button>
    </div>
  `,
});
