import BmsModal from '@/components/layout/BmsModal.vue';
import BmsProblem from '@/components/utils/BmsProblem.vue';
import { isProblem } from '@/helpers/problem.helper.ts';
import { StatusType } from '@/models/status-type.model';

const openNotification = {
  details: 'this is a detail',
  title: 'this is a title',
};
for (let i = 0; i < 50; i++) {
  openNotification['error' + i] =
    'Error ' +
    i +
    ' Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ';
}

export default {
  methods: { isProblem },
  components: { BmsProblem },
  title: 'Composants/layout/Modal',
  component: BmsModal,
  tags: ['!autodocs'],
  argTypes: {
    modelValue: {
      control: { type: 'boolean' },
    },
    backdropDismiss: {
      control: { type: 'boolean' },
    },
    closable: {
      control: { type: 'boolean' },
    },
    title: {
      control: { type: 'text' },
    },
    submitLabel: {
      control: { type: 'text' },
    },
    cancelLabel: {
      control: { type: 'text' },
    },
    buttons: {},
    submitAction: {},
    cancelAction: {},
  },
};

const Template = (args) => ({
  components: {
    BmsModal,
    BmsProblem,
  },
  setup() {
    return { args };
  },
  template: `
      <BmsModal v-bind="args">
        <template v-if="args.headerSlot" #header>
          <span v-html='args.headerSlot'/>
        </template>
        <template v-if="args.titleSlot" #title>
          <span v-html='args.titleSlot'/>
        </template>
        <template #default>
          <h3>This is content</h3>
          <p v-html="args.content"/>
          <BmsProblem
              v-if="args.openNotification"
              :problem="args.openNotification"
          />
        </template>
        <template v-if="args.footerSlot" #footer>
          <span v-html='args.footerSlot'/>
        </template>
      </BmsModal>
    `,
});

export const Default = Template.bind({});
Default.args = {
  modelValue: true,
  title: 'Titre',
};

export const WithScroll = Template.bind({});
WithScroll.args = {
  modelValue: true,
  title: 'Titre',
  content:
    'This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>',
};

export const Success = Template.bind({});
Success.args = {
  modelValue: true,
  title: 'Titre de ma modal',
  type: StatusType.Success,
};

export const Warning = Template.bind({});
Warning.args = {
  modelValue: true,
  title: 'Titre',
  type: StatusType.Warning,
};

export const Error = Template.bind({});
Error.args = {
  modelValue: true,
  title: 'Titre',
  type: StatusType.Danger,
  openNotification,
};

export const CustomHeader = Template.bind({});
CustomHeader.args = {
  modelValue: true,
  closable: false,
  submitLabel: 'Submit',
  cancelLabel: 'Cancel',
  headerSlot: 'This is a custom header',
};

export const CustomSlots = Template.bind({});
CustomSlots.args = {
  modelValue: true,
  titleSlot: 'This is a title',
  footerSlot: 'This is a custom footer',
};

export const CustomButtons = Template.bind({});
CustomButtons.args = {
  modelValue: true,
  buttons: [
    {
      label: 'Button 1',
      role: 'cancel',
      color: 'neutral',
    },
    {
      label: 'Button 2',
      role: 'cancel',
      color: 'neutral',
    },
    {
      label: 'Button 3 disabled',
      role: 'submit',
      disabled: true,
    },
    {
      label: 'Button 4',
      role: 'submit',
    },
  ],
};

export const Loading = Template.bind({});
Loading.args = {
  modelValue: true,
  title: 'Titre de modal',
  loading: true,
  loadingText: 'Chargement...',
};
