import BmsContentPageLayout from '../components/layout/BmsContentPageLayout.vue';
import BmsTable from '../components/table/BmsTable.vue';
import BmsBreadcrumb from '../components/navigation/BmsBreadcrumb.vue';
import BmsButton from '../components/button/BmsButton.vue';
import BmsAutocomplete from '../components/form/BmsAutocomplete.vue';
import BmsInputText from '../components/form/BmsInputText.vue';
import BmsForm from '../components/layout/BmsForm.vue';
import BmsHeaderTitle from '../components/layout/BmsHeaderTitle.vue';

export default {
  components: {
    BmsHeaderTitle,
    BmsForm,
    BmsInputText,
    BmsAutocomplete,
    BmsButton,
    BmsBreadcrumb,
    BmsTable,
  },
  title: 'Pages/Form',
  component: BmsContentPageLayout,
  argTypes: {},
};

const Template = (args) => ({
  components: {
    BmsContentPageLayout,
    BmsHeaderTitle,
    BmsBreadcrumb,
    BmsForm,
    BmsAutocomplete,
    BmsInputText,
    BmsButton,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsContentPageLayout>
      <template #header>
        <BmsHeaderTitle title="Le Titre de la page" />
      </template>
      <template #breadcrumb>
        <BmsBreadcrumb :breadcrumbs="args.breadcrumb" />
      </template>
      <template #default>
        <BmsForm>
          <template #form_1>
            Here the form slot for input
            <br />
            <BmsInputText v-model="args.inputValue"
                          label="Mon premier champ de formulaire"
                          helper-text="help me here !"
                          placeholder="ici votre placeholder"
            />
          </template>
          <template #form_2>
            <BmsAutocomplete v-model="args.selectValue"
                             label="Mon second champ de formulaire"
                             placeholder="ici votre placeholder"
                             helper-text="help me here !"
                             :options="['option1','option2']" />
          </template>
          <template #actions>
            <BmsButton :type="'secondary'">
              Annuler
            </BmsButton>
            <BmsButton :type="'primary'">
              Modifier
            </BmsButton>
          </template>
        </BmsForm>
      </template>
    </BmsContentPageLayout>
  `,
});

export const Default = Template.bind({});
Default.args = {
  inputValue: null,
  selectValue: null,
  breadcrumb: [{ label: 'list', to: '/exposed' }, { label: 'form' }],
};
