import BmsForm from '@/components/layout/BmsForm.vue';
import BmsInputText from '@/components/form/BmsInputText.vue';
import BmsSelect from '@/components/form/BmsSelect.vue';
import BmsTextArea from '@/components/form/BmsTextArea.vue';
import BmsInputNumber from '@/components/form/BmsInputNumber.vue';
import BmsButton from '@/components/button/BmsButton.vue';
import { ref } from 'vue';

export default {
  title: 'Composants/layout/Form',
  component: BmsForm,
};

const Template = (args) => ({
  components: {
    BmsForm,
  },
  setup() {
    return { args };
  },
  template: `
    <BmsForm v-bind="args">
      <template #organization>
        <p>custom slot you can define whith any name(organization)</p>
      </template>    
      <template #actions>
        <div>Slot for Actions components</div>
      </template>
      <template #site>
        <p>custom slot you can define whith any name (site)</p>
      </template>
    </BmsForm>
  `,
});

export const Default = Template.bind({});

// Simple template for documentation
const SimpleTemplate = (args) => ({
  components: {
    BmsForm,
    BmsInputText,
    BmsSelect,
    BmsTextArea,
    BmsInputNumber,
    BmsButton,
  },
  setup() {
    const name = ref(args.name || '');
    const email = ref(args.email || '');
    const phone = ref(args.phone || '');
    const country = ref(args.country || '');
    const description = ref(args.description || '');
    const age = ref(args.age || null);
    return { args, name, email, phone, country, description, age };
  },
  template: `
  <BmsForm>
    <template #form_1>
      <h2>Personal Information</h2>
      <BmsInputText label="Name" v-model="name" placeholder="Enter your name" required />
      <BmsInputText label="Email" v-model="email" placeholder="Enter your email" required />
      <BmsInputText label="Phone" v-model="phone" placeholder="Enter your phone number" />
      <BmsSelect 
        label="Country" 
        v-model="country" 
        placeholder="Select a country"
        :options="[
          { label: 'France', value: 'fr' },
          { label: 'United States', value: 'us' },
          { label: 'United Kingdom', value: 'uk' },
          { label: 'Germany', value: 'de' }
        ]"
      />
    </template>
    <template #form_2>
      <h2>Additional Details</h2>
      <BmsTextArea label="Description" v-model="description" placeholder="Enter a description" />
      <BmsInputNumber label="Age" v-model="age" :min="0" :max="120" />
    </template>
    <template #actions>
      <BmsButton type="secondary">Cancel</BmsButton>
      <BmsButton type="primary">Submit</BmsButton>
    </template>
  </BmsForm>
  `,
});

// Playground with default values for documentation
export const PlaygroundForm = SimpleTemplate.bind({});
PlaygroundForm.parameters = { chromatic: { disable: true } };
PlaygroundForm.args = {
  name: '',
  email: '',
  phone: '',
  country: '',
  description: '',
  age: null,
};

// Do: Form with organized sections
export const DoWithOrganizedSections = SimpleTemplate.bind({});
DoWithOrganizedSections.parameters = { chromatic: { disable: true } };
DoWithOrganizedSections.args = {
  name: '',
  email: '',
  phone: '',
  country: '',
  description: '',
  age: null,
};

// Do: Form with actions
export const DoWithActions = SimpleTemplate.bind({});
DoWithActions.parameters = { chromatic: { disable: true } };
DoWithActions.args = {
  name: '',
  email: '',
  phone: '',
  country: '',
  description: '',
  age: null,
};

// Don't: Form without actions
export const DontNoActions = (args) => ({
  components: {
    BmsForm,
    BmsInputText,
    BmsSelect,
    BmsTextArea,
  },
  setup() {
    const name = ref(args.name || '');
    const email = ref(args.email || '');
    const country = ref(args.country || '');
    const description = ref(args.description || '');
    return { args, name, email, country, description };
  },
  template: `
  <BmsForm>
    <template #form_1>
      <h2>Personal Information</h2>
      <BmsInputText label="Name" v-model="name" required />
      <BmsInputText label="Email" v-model="email" required />
      <BmsSelect 
        label="Country" 
        v-model="country"
        :options="[
          { label: 'France', value: 'fr' },
          { label: 'United States', value: 'us' }
        ]"
      />
    </template>
    <template #form_2>
      <h2>Additional Details</h2>
      <BmsTextArea label="Description" v-model="description" />
    </template>
  </BmsForm>
  `,
});
DontNoActions.parameters = { chromatic: { disable: true } };
DontNoActions.args = {
  name: '',
  email: '',
  country: '',
  description: '',
};

export const DoWithActionsButton = SimpleTemplate.bind({});
DoWithActionsButton.parameters = { chromatic: { disable: true } };
DoWithActionsButton.args = {
  name: '',
  email: '',
  phone: '',
  country: '',
  description: '',
  age: null,
};

// Don't: Form without section titles
export const DontNoSectionTitles = (args) => ({
  components: {
    BmsForm,
    BmsInputText,
    BmsSelect,
    BmsTextArea,
    BmsInputNumber,
    BmsButton,
  },
  setup() {
    const name = ref(args.name || '');
    const email = ref(args.email || '');
    const phone = ref(args.phone || '');
    const country = ref(args.country || '');
    const description = ref(args.description || '');
    const age = ref(args.age || null);
    return { args, name, email, phone, country, description, age };
  },
  template: `
  <BmsForm>
    <template #form_1>
      <BmsInputText label="Name" v-model="name" placeholder="Enter your name" required />
      <BmsInputText label="Email" v-model="email" placeholder="Enter your email" required />
      <BmsInputText label="Phone" v-model="phone" placeholder="Enter your phone number" />
      <BmsSelect 
        label="Country" 
        v-model="country" 
        placeholder="Select a country"
        :options="[
          { label: 'France', value: 'fr' },
          { label: 'United States', value: 'us' }
        ]"
      />
    </template>
    <template #form_2>
      <BmsTextArea label="Description" v-model="description" placeholder="Enter a description" />
      <BmsInputNumber label="Age" v-model="age" :min="0" :max="120" />
    </template>
    <template #actions>
      <BmsButton type="secondary">Cancel</BmsButton>
      <BmsButton type="primary">Submit</BmsButton>
    </template>
  </BmsForm>
  `,
});
DontNoSectionTitles.parameters = { chromatic: { disable: true } };
DontNoSectionTitles.args = {
  name: '',
  email: '',
  phone: '',
  country: '',
  description: '',
  age: null,
};

export const DoWithSectionTitles = SimpleTemplate.bind({});
DoWithSectionTitles.parameters = { chromatic: { disable: true } };
DoWithSectionTitles.args = {
  name: '',
  email: '',
  phone: '',
  country: '',
  description: '',
  age: null,
};
