<script>
import OtherListWrapper from "~/components/utilities/OtherListWrapper";
import PlainLabel from "~/components/atoms/label/PlainLabel";
import {Fragment} from "vue-fragment"
import PriceLabel from "~/components/atoms/label/PriceLabel";
import OverviewLabel from "~/components/atoms/label/OverviewLabel";
import ActiveButton from "~/components/atoms/button/ActiveButton";
import DisabledButton from "~/components/atoms/button/DisabledButton";
import OrderedList from "~/components/atoms/list/OrderedList";
import UnorderedList from "~/components/atoms/list/UnorderedList";
import ContentRows from "~/components/atoms/utility/ContentRows";
import SquareCard from "~/components/atoms/card/SquareCard";
import CircleCard from "~/components/atoms/card/CircleCard";
import PlainModal from "~/components/atoms/modal/PlainModal";
import DateInput from "~/components/atoms/input/DateInput";
import TextInput from "~/components/atoms/input/TextInput";
import TextareaInput from "~/components/atoms/input/TextareaInput";
import RadioInput from "~/components/atoms/input/RadioInput";
import CheckboxInput from "~/components/atoms/input/CheckboxInput";
import SelectInput from "~/components/atoms/input/SelectInput";
import SuggestionInput from "~/components/atoms/input/SuggestionInput";
import SwitchInput from "~/components/atoms/input/SwitchInput";
import ContentSpan from "~/components/atoms/utility/ContentSpan";
import PlainList from "~/components/atoms/list/PlainList";
import PasswordInput from "~/components/atoms/input/PasswordInput";

export default {
  components: {
    PasswordInput,
    PlainList,
    ContentSpan,
    SwitchInput,
    SuggestionInput,
    SelectInput,
    CheckboxInput,
    RadioInput,
    TextareaInput,
    TextInput,
    DateInput,
    PlainModal,
    CircleCard,
    SquareCard,
    ContentRows,
    UnorderedList,
    OrderedList,
    DisabledButton,
    ActiveButton,
    OverviewLabel,
    PriceLabel,
    Fragment,
    PlainLabel,
    OtherListWrapper
  },
  data: () => ({
    form: {
      text: "",
      password : "",
      textarea: "",
      select: {},
      radio: {},
      switches: false,
      suggestion: "",
      checkbox: [],
      date: new Date(),
      time: new Date(),
    },
    options: {
      example: [
        {text: "Opsi 1", value: "1"},
        {text: "Opsi 2", value: "2"},
        {text: "Opsi 3", value: "3"}
      ]
    },
    modal: {
      modal_example: false
    }
  }),
  methods: {
    toggleModalExample() {
      this.modal.modal_example = !this.modal.modal_example
    },
    updateSelectedSuggestion(value) {
      this.helper.suggestion.example_selected = value
    }
  }
}
</script>
<template>
  <b-nav pills vertical>
    <div id="atoms" class="mb-5">
      <h1 class="font-weight-bold">Atomic</h1>
      <p class="font-size-16">
        It's small parts of our component, this atoms is only containing one div or one wrapper. so please do not create
        the atoms more than one wrapper. you can find it on path <span
          class="bg-light font-size-14 shadows p-1 rounded">components/atoms</span>
      </p>
      <hr>
    </div>
    <other-list-wrapper id="plain-label" title="Plain Label">
      <template slot="caption">
        use for simple label, so we're use it for render simple text
      </template>
      <template slot="example">
        <PlainLabel value="Lorem ipsum dolor sit amet, consectetur adipisicing elit."/>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="plain-label" title="Price Label">
      <template slot="caption">
        use for rendering price format in label. this is only for idr format
      </template>
      <template slot="example">
        <price-label value="100000" :has_label="true" :is_italic="true"/>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="overview-label" title="Overview Label">
      <template slot="caption">
        use for rendering simple text we can limit the text length, and the text automatic shows the tooltips for
        showing full text
      </template>
      <template slot="example">
        <overview-label :limit_text="100"
                        value="Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad dolorem iste similique voluptatibus!
             Assumenda blanditiis expedita id itaque maxime modi neque optio possimus, quo sapiente. Aspernatur
             laborum nihil perspiciatis?"/>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="active-button" title="Active Button">
      <template slot="caption">
        use for create the button and the button can be clicked, the caption of the button can be a text, icon or both
        of them
      </template>
      <template slot="example">
        <active-button size="sm" text="Simpan perubahan"/>
        <active-button size="sm" text="Simpan perubahan" type="outline"/>
        <active-button size="sm" text="Simpan perubahan" type="nude"/>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="disabled-button" title="Disabled Button">
      <template slot="caption">
        use for create the loading button, the caption of the button its only containing the text cause the loader icon
        is auto generate
      </template>
      <template slot="example">
        <disabled-button size="sm" text="menyimpan perubahan"/>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="ordered-list" title="Ordered List">
      <template slot="caption">
        use for create the list, its a nude list so we're not providing the list with style or class. if you want to
        create style or use the class please custom manually
      </template>
      <template slot="example">
        <ordered-list :value="[{text :'List 1', value : 1}, {text :'List 2', value : 2}]"/>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="unordered-list" title="Unordered List">
      <template slot="caption">
        use for create the list, its a nude list so we're not providing the list with style or class. if you want to
        create style or use the class please custom manually
      </template>
      <template slot="example">
        <unordered-list :value="[{text :'List 1', value : 1}, {text :'List 2', value : 2}]"/>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="plain-list" title="Plain List">
      <template slot="caption">
        use for plain list, this is just only has li rows.
      </template>
      <template slot="example">
        <plain-list list_style="number">
          This is plain list
        </plain-list>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="row-grid" title="Row Grid">
      <template slot="caption">
        use for existing the row col in bootstrap class. it's just for short hand, you can use native bootstrap class if
        you want
      </template>
      <template slot="example">
        <content-rows additional_class="bg-white" :has_gutters="false">
          Plate your content here
        </content-rows>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="span-grid" title="Span Grid">
      <template slot="caption">
        use for existing the loading etc
      </template>
      <template slot="example">
        <content-span size="sm" />
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="square-grid" title="Square Card Grid">
      <template slot="caption">
        use for existing the cols in bootstrap class. please use this component cause for make sure our component
        maintainless
      </template>
      <template slot="example">
        <square-card>
          Plate your content here
        </square-card>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="circle-grid" title="Circle Card Grid">
      <template slot="caption">
        use for existing the cols in bootstrap class. its same but this card used for circle component or circle section
      </template>
      <template slot="example">
        <circle-card :col="1">
          content
        </circle-card>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="modal" title="Modal Based">
      <template slot="caption">
        use for create based modal. so you can fill the content inside modal based on your own case
      </template>
      <template slot="example">
        <active-button text="click me!" size="sm" @click="toggleModalExample"/>
        <plain-modal :is_showed="modal.modal_example" @close="toggleModalExample">
          <h4>Hello!</h4>
        </plain-modal>
      </template>
    </other-list-wrapper>

    <other-list-wrapper id="text-input" title="Text input" :has_detail="true">
      <template slot="caption">
        use for all text input, the input field can be custom to several format. for example you're want to reformat
        into price format in idr
        you can do it set props format to "currency". prop id is required in this component, so... make sure you're set
        the id props
      </template>
      <template slot="example">
        <div class="col-6">
          <text-input v-model="form.text" format="currency" id="form-text" placeholder="Masukkan Harga"/>
        </div>
      </template>
      <template slot="value"> {{ form.text }}</template>
    </other-list-wrapper>

    <other-list-wrapper id="password-input" title="Password input" :has_detail="true">
      <template slot="caption">
        use for password input, maybe we have 2 molecules 1 for toggling character behind the input field
      </template>
      <template slot="example">
        <div class="col-6">
          <password-input v-model="form.password" id="form-password" placeholder="Masukkan Password"/>
        </div>
      </template>
      <template slot="value"> {{ form.password }}</template>
    </other-list-wrapper>

    <other-list-wrapper id="textarea-input" title="Textarea input" :has_detail="true">
      <template slot="caption">
        use for text area input, usually this component use for address, details etc
      </template>
      <template slot="example">
        <div class="col-6">
          <textarea-input v-model="form.textarea" format="no-symbol" id="form-textarea"/>
        </div>
      </template>
      <template slot="value"> {{ form.textarea }}</template>
    </other-list-wrapper>

    <other-list-wrapper id="select-input" title="Select input (Select Option)" :has_detail="true">
      <template slot="caption">
        use for select the state. this component usually use for vehicle type or anything else who has more than 5
        options
      </template>
      <template slot="example">
        <div class="col-6">
          <select-input :options="options.example" v-model="form.select"/>
        </div>
      </template>
      <template slot="value"> {{ form.select }}</template>
    </other-list-wrapper>

    <other-list-wrapper id="suggestion-input" title="Suggestion input (Text)" :has_detail="true">
      <template slot="caption">
        use for select one of many data in list, we have different way to get the value. please check this component for
        details, for make sure the component cant works properly
      </template>
      <template slot="example">
        <div class="col-6">
          <suggestion-input :options="options.example" v-model="form.suggestion"  :search_by="item => item.text"/>
        </div>
      </template>
      <template slot="value"> {{ form.suggestion }}</template>
    </other-list-wrapper>

    <other-list-wrapper id="switch-input" title="Switch input" :has_detail="true">
      <template slot="caption">
        use for select the state. this is same with checkbox but its just have one options for selecting true or false
      </template>
      <template slot="example">
        <div class="col-6">
          <switch-input v-model="form.switches" size="sm" />
        </div>
      </template>
      <template slot="value"> {{ form.switches }}</template>
    </other-list-wrapper>

    <other-list-wrapper id="checkbox-input" title="Checkbox input" :has_detail="true">
      <template slot="caption">
        use check input, this component usually use for multiple options or maybe 1 options but the data can be selected
        more than one field
      </template>
      <template slot="example">
        <div class="col-6">
          <checkbox-input :options="options.example" v-model="form.checkbox"/>
        </div>
      </template>
      <template slot="value"> {{ form.checkbox }}</template>
    </other-list-wrapper>

    <other-list-wrapper id="radio-input" title="Radio input" :has_detail="true">
      <template slot="caption">
        use for radio selection. this component usually use for multiple options but the data can be selected just only
        one
      </template>
      <template slot="example">
        <div class="col-6">
          <radio-input :options="options.example" v-model="form.radio"/>
        </div>
      </template>
      <template slot="value"> {{ form.radio }}</template>
    </other-list-wrapper>

    <other-list-wrapper id="date-input" title="Date input" :has_detail="true">
      <template slot="caption">
        use for all date input, its containing type so you can change this date input into several type. e.g month, week
        datetime, date, year. (go to <a href="https://mengxiong10.github.io/vue2-datepicker/index.html#ValueType">vue-multiselect</a>
        for details)
      </template>
      <template slot="example">
        <div class="col-6">
          <date-input v-model="form.date"></date-input>
        </div>
      </template>
      <template slot="value"> {{ form.date }}</template>
    </other-list-wrapper>
  </b-nav>
</template>