<template>
  <div class="desktop-menu-layout mobile-menu-layout sticky-footer-layout">
    <div id="app">
      <div id="pageTop"></div>
      <Menu
        display="desktop"
        @click="selectMenu"
        :selected="activeMenu"
        v-slot="{ selected }"
      >
        <MenuCategory title="Item 1" :selected="selected">
          <MenuLink
            title="Item 1.0"
            id="0th"
            url=""
            :selected="selected"
          ></MenuLink>
          <MenuCategory title="Item 1.1" :selected="selected">
            <MenuLink
              title="First"
              id="1st"
              url=""
              :selected="selected"
            ></MenuLink>
            <MenuLink
              title="Second"
              id="2nd"
              url=""
              :selected="selected"
            ></MenuLink>
          </MenuCategory>
        </MenuCategory>
        <MenuLink
          title="Home"
          id="home"
          url=""
          active="true"
          :selected="selected"
        ></MenuLink>
        <MenuLink
          title="About"
          id="about"
          url=""
          :selected="selected"
        ></MenuLink>
      </Menu>
      <NavBar
        title="basecoat </br> components"
        :sections="sections"
        company="Internal Europe"
      ></NavBar>
      <!-- <HelloWorld msg="Hello world!" /> -->
      <main class="page-wrapper">
        <!-- <SectionHeader title="Top Section" :top="true"></SectionHeader> -->
        <Section title="First Section" id="first-section">
          <Input
            id="test"
            label="Test"
            type="email"
            is_required="false"
            icon="user"
            help="This is help"
            v-model="input.input"
          ></Input>
          <Search
            id="searchbox"
            label="search"
            placeholder="Search stuff"
            icon="search"
            search_method="get"
            search_request_param="search"
            search_path="http://nodered.docker.localhost/test"
            option_display="name,id"
            option_format="<b>${0}</b><br>ID: ${1}"
            v-model="input.search"
          >
          </Search>
          <DatePicker
            id="date"
            label="Date"
            is_required="false"
            icon="calendar"
            help="Select a date"
            v-model="input.date"
          ></DatePicker>
          <Checkbox
            label="Select some numbers"
            help="You should click a number!"
            orientation="column"
            id="numbers_check"
            v-model="input.checkbox"
            v-slot="{ selectedOptions, orientation }"
          >
            <CheckboxOption
              v="One"
              k="1"
              :selectedOptions="selectedOptions"
              :orientation="orientation"
            ></CheckboxOption>
            <CheckboxOption
              v="Two"
              k="2"
              :selectedOptions="selectedOptions"
              :orientation="orientation"
            ></CheckboxOption>
            <CheckboxOption
              v="Three"
              k="3"
              :selectedOptions="selectedOptions"
              :orientation="orientation"
            ></CheckboxOption>
          </Checkbox>

          <Checkbox
            orientation="row"
            label="Things todo"
            id="things_check"
            :options="todoOptions"
            v-model="input.todo"
          ></Checkbox>

          <MultiDropdown
            label="Multiple things todo"
            id="multi_things_check"
            :options="todoOptions"
            v-model="input.multi_todo"
          ></MultiDropdown>

          <FilePicker
            label="Select File"
            upload_path="http://nodered.docker.localhost/upload"
          >
          </FilePicker>
          <Radio
            orientation="column"
            label="Things todo"
            id="things_radio"
            :options="todoOptions"
            v-model="input.radio"
          ></Radio>
          <Radio
            label="Select one numbers"
            help="You should click a number!"
            id="number_radio"
            orientation="row"
            v-model="input.radio2"
            v-slot="slotProps"
          >
            <RadioOption v="One" k="1" v-bind="slotProps"></RadioOption>
            <RadioOption v="Two" k="2" v-bind="slotProps"></RadioOption>
            <RadioOption v="Three" k="3" v-bind="slotProps"></RadioOption>
          </Radio>
          <Dropdown
            label="Select color"
            icon="paint-brush"
            :options="colorOptions"
            v-model="input.dropdown"
          ></Dropdown>
          <Dropdown
            label="Make fire with?"
            icon="fire"
            id="fire_dropdown"
            :options="fireOptions"
            v-model="input.fire"
          ></Dropdown>
          <Dropdown
            label="Select Number"
            text="Please select a number"
            icon="sort-numeric-desc"
            v-model="selectedNumber"
          >
            <DropdownOption
              v-for="number in numberOptions"
              :key="number.someId"
              :k="number.someId"
              :v="number.someVal"
            ></DropdownOption>
          </Dropdown>
          <Dropdown label="Select thing" icon="s15" v-model="input.dropdown2">
            <DropdownOption k="test" v="Test"></DropdownOption>
            <DropdownOption k="foo" v="Foo"></DropdownOption>
          </Dropdown>
          <Toggle v-model="input.toggle" label="Enable stuff"></Toggle>
          <Panels id="panels">
            <Panel
              id="panel-1"
              parent_id="panels"
              title="First Panel"
              url="https://www.google.com"
              :items="panelItem"
            >
              <template #body> Hello world </template>
              <template #footer>
                <div class="btn-link-toolbar pull-right">
                  <Button label="Delete" action="link" icon="trash"></Button>
                  <span class="btn-separator"></span>
                  <Button label="View" action="link" icon="desktop"></Button>
                </div>
              </template>
            </Panel>
            <Panel id="panel-2" parent_id="panels" title="Second Panel">
              <template #body> Hello world </template>
            </Panel>
            <Panel id="panel-3" parent_id="panels" title="Third Panel"
              ><template #footer>
                <div class="btn-link-toolbar pull-right">
                  <Button label="View" action="link" icon="desktop"></Button>
                </div>
              </template>
            </Panel>
            <Panel
              id="panel-4"
              parent_id="panels"
              title="Static Panel"
              is_static="true"
              ><template #body>
                <p>this shoudl be static</p>
              </template>
              ><template #footer>
                <p>Count: 111</p>
              </template>
            </Panel>
          </Panels>
          <Panels id="vforpanels">
            <Panel
              v-for="panel in panels"
              :key="panel.name"
              :id="panel.name"
              parent_id="vforpanels"
              :status="panel.valid ? '' : 'warning'"
              :title="panel.name"
            >
              <template #body> Hello world </template>
            </Panel>
          </Panels>
          <Button
            action="primary"
            label="Show Modal"
            icon="window-maximize"
            @click="showModal = true"
          ></Button>
          <Button action="success" label="Submit" url="/test"></Button>
          <hr />
          <Button
            action="primary"
            label="Test"
            icon="pencil"
            tooltip="Test tooltip"
            is_loading="false"
          ></Button>
          <div class="progress">
            <div
              class="progress-bar"
              role="progressbar"
              style="width: 90%"
            ></div>
          </div>
          <div class="table-responsive scrollbars">
            <table class="table table-striped test">
              <thead>
                <tr>
                  <th>Column1</th>
                  <th>Column2</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Foo</td>
                  <td>Bar</td>
                </tr>
                <tr>
                  <td>Test</td>
                  <td>Bla</td>
                </tr>
              </tbody>
            </table>
          </div>
        </Section>
        <Section title="Second Section" id="second-section"> </Section>
        <Dropdown
          label="Languages"
          id="language_select"
          icon="language"
          v-model="input.language"
        >
          <DropdownOption
            v-for="(v, k) in languageOptions"
            :key="k"
            :k="k"
            :v="v"
          ></DropdownOption>
        </Dropdown>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <Modal
          :open="showModal"
          id="modal"
          :dismissable="true"
          :scrollable="true"
          size="large"
          title="Some title"
          @close="showModal = false"
        >
          <template #body>
            <Dropdown
              label="Languages"
              id="language_select"
              icon="language"
              in_modal="true"
              v-model="input.language2"
            >
              <DropdownOption
                v-for="(v, k) in languageOptions"
                :key="k"
                :k="k"
                :v="v"
              ></DropdownOption>
            </Dropdown>
            <Dropdown label="Select thing" icon="s15" v-model="input.dropdown3">
              <DropdownOption k="test" v="Test"></DropdownOption>
              <DropdownOption k="foo" v="Foo"></DropdownOption>
              <DropdownOption k="sdf" v="zer"></DropdownOption>
              <DropdownOption k="a" v="A"></DropdownOption>
              <DropdownOption k="b" v="B"></DropdownOption>
              <DropdownOption k="c" v="C"></DropdownOption>
            </Dropdown>
          </template>
        </Modal>
      </main>
      <Menu display="mobile">
        <MenuLink title="Home" url="" active="true"></MenuLink>
        <MenuLink title="About" url=""></MenuLink>
      </Menu>
    </div>
  </div>
</template>

<script>
// import HelloWorld from "./components/Hello";
// import { Section, SectionHeader } from "./components/Section";
import { str2bool } from "./util";
import { Section } from "./components/Section";
import Button from "./components/Button";
import Input from "./components/Input";
import FilePicker from "./components/File";
import NavBar from "./components/NavBar";
import Modal from "./components/Modal";
import { Dropdown, DropdownOption } from "./components/Dropdown";
import { MultiDropdown } from "./components/MultiDropdown";
import { Search } from "./components/Dynamic";
import { Checkbox, CheckboxOption } from "./components/Checkbox";
import { Radio, RadioOption } from "./components/Radio";

import { DatePicker } from "./components/Date";
import { Panel, Panels } from "./components/Panel";
import Toggle from "./components/Toggle";
import { Menu, MenuLink, MenuCategory } from "./components/Menu";
window.str2bool = str2bool;

export default {
  name: "App",
  components: {
    NavBar,
    // SectionHeader,
    // HelloWorld,
    Menu,
    MenuLink,
    MenuCategory,
    Modal,
    Button,
    Input,
    FilePicker,
    Panel,
    Panels,
    Section,
    Dropdown,
    DropdownOption,
    MultiDropdown,
    // MultiDropdownOption,
    Search,
    Checkbox,
    CheckboxOption,
    Radio,
    RadioOption,
    DatePicker,
    Toggle,
  },
  mounted() {
    let activeMenuId = localStorage.getItem("activeMenuId");
    let activeMenuBreadcrumb = localStorage.getItem("activeMenuBreadcrumb");
    if (activeMenuId && activeMenuBreadcrumb) {
      this.activeMenu = {
        id: activeMenuId,
        breadcrumb: activeMenuBreadcrumb.split(","),
      };
    }
  },
  data() {
    return {
      showModal: false,
      activeMenu: {},
      panelItem: {
        Status: "Not good",
        "Item#": "DJO54569",
        Location: "Mars",
      },
      sections: {
        "first-section": "First Section",
        "second-section": "Second Section",
      },
      numberOptions: [
        { someId: "1", someVal: "One" },
        { someId: "2", someVal: "Two" },
        { someId: "3", someVal: "Three" },
      ],
      selectedNumber: "",
      todoOptions: {
        work: "Do some work",
        shower: "Have a shower",
        eat: "Grab some food",
        go_shopping: "Go Shopping",
        sleep: "Get some sleep",
      },
      fireOptions: ["match", "lighter", "flints", "magic"],
      languageOptions: {
        Czech: "Czech",
        Dutch: "Dutch",
        "Dutch / French": "Dutch / French",
        "Dutch / French / English": "Dutch / French / English",
        "Dutch / English": "Dutch / English",
        English: "English",
        "English / French": "English / French",
        "English / French / German": "English / French / German",
        "English / Italian": "English / Italian",
        French: "French",
        "French / English": "French / English",
        "French / Dutch": "French / Dutch",
        German: "German",
        "German / English": "German / English",
        "German / French": "German / French",
        Italian: "Italian",
        Polish: "Polish",
        Spanish: "Spanish",
      },

      colorOptions: {
        red:
          '<div>Red  <span class="fa fa-square" style="color: red"></span></div>',
        blue:
          '<div>Blue  <span class="fa fa-square" style="color: blue"></span></div>',
        green:
          '<div>Green  <span class="fa fa-square" style="color: green"></span></div>',
        yellow:
          '<div>Yellow  <span class="fa fa-square" style="color: yellow"></span></div>',
      },
      input: {
        dropdown: "red",
        dropdown3: "foo",
      },
      panels: [
        {
          name: "velero-aws-credentials",
          valid: true,
        },
        {
          name: "velero-azure-credentials",
          valid: true,
        },
        {
          name: "velero-bsl-credentials",
          valid: false,
        },
      ],
    };
  },
  methods: {
    selectMenu(event) {
      console.log("selectMenu", event);

      this.activeMenu = event;
      localStorage.setItem("activeMenuId", event.id);
      localStorage.setItem("activeMenuBreadcrumb", event.breadcrumb);
    },
    testMenu(event) {
      console.log("test", event);
    },
  },
};
</script>
<style scoped>
.test {
  border-top: 3px red solid;
  border-radius: 3px;
}
</style>