import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
import { select } from '@storybook/addon-knobs';
import ChecOption from '../../components/ChecOption.vue';
import ChecOptionsMenu from '../../components/ChecOptionsMenu.vue';
import ChecIcon from '../../components/ChecIcon.vue';
import ChecNavIcon from '../../components/ChecNavIcon.vue';

<Meta title="Components/Options menu" component={ChecOptionsMenu} />

# Options menu

<Props of={ChecOptionsMenu} />

## Default

<Preview>
  <Story name="Default">
    {{
      components: {
        ChecOption,
        ChecOptionsMenu,
      },
      props: {
        menuPlacement: {
          default: select('Menu placement', [
            'auto',
            'auto-start',
            'auto-end',
            'top',
            'top-start',
            'top-end',
            'bottom',
            'bottom-start',
            'bottom-end',
            'right',
            'right-start',
            'right-end',
            'left',
            'left-start',
            'left-end'
          ], 'bottom'),
        },
      },
      methods: {
        action: action('option-selected'),
      },
      template: `
        <div class="w-full h-screen bg-gray-200 flex items-center justify-around">
          <ChecOptionsMenu :menu-placement="menuPlacement" prevent-toggle>
            <ChecOption @option-selected="action">
              Edit record
            </ChecOption>
            <ChecOption @option-selected="action">
              Check for changes
            </ChecOption>
            <ChecOption tag="a" href="https://google.com" target="_blank">
              Go to Google
            </ChecOption>
            <ChecOption @option-selected="action" destructive>
              Delete record
            </ChecOption>
            <ChecOption :option="{ disabled: true }">
              Disabled action
            </ChecOption>
            <ChecOption loading>
              Loading
            </ChecOption>
          </ChecOptionsMenu>
        </div>
      `,
    }}
  </Story>
</Preview>

## Within a table

<Preview>
  <Story name="Within table">
    {{
      components: {
        ChecOption,
        ChecOptionsMenu,
      },
      props: {
        menuPlacement: {
          default: select('Menu placement', [
            'auto',
            'auto-start',
            'auto-end',
            'top',
            'top-start',
            'top-end',
            'bottom',
            'bottom-start',
            'bottom-end',
            'right',
            'right-start',
            'right-end',
            'left',
            'left-start',
            'left-end'
          ], 'bottom'),
        },
      },
      methods: {
        action: action('option-selected'),
      },
      template: `
      <div class="p-16 flex justify-center font-lato w-full text-gray-500">
        <div class="w-full relative">
          <table class="w-full">
            <thead>
              <tr>
                <th class="webhooks__id">ID</th>
                <th>Events</th>
                <th>URL</th>
                <th class="text-right">Options</th>
              </tr>
            </thead>
            <tbody>
              <tr
                class="webhook"
              >
                <td>
                  stuff
                </td>
                <td class="webhook__events">
                  other
                </td>
                <td>
                  more
                </td>
                <td class="flex justify-end">
                  <ChecOptionsMenu :open="true" :menu-placement="menuPlacement">
                    <ChecOption @option-selected="action">
                      Edit record
                    </ChecOption>
                    <ChecOption @option-selected="action">
                      Check for changes
                    </ChecOption>
                    <ChecOption @option-selected="confirm('Are you sure?')" destructive>
                      Delete record
                    </ChecOption>
                    <ChecOption :option="{ disabled: true }">
                      Disabled action
                    </ChecOption>
                  </ChecOptionsMenu>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>`
    }}
  </Story>
</Preview>

## Right aligned

<Preview>
  <Story name="Right aligned">
    {{
      components: {
        ChecOption,
        ChecOptionsMenu,
      },
      methods: {
        action: action('option-selected'),
      },
      template: `
      <div class="p-16 flex justify-center font-lato w-full text-gray-500">
         <div class="w-64 relative">
          <ChecOptionsMenu position="right" :open="false">
            <ChecOption @option-selected="action">
              Edit record
            </ChecOption>
            <ChecOption @option-selected="action">
              Check for changes
            </ChecOption>
            <ChecOption @option-selected="action" destructive>
              Delete record
            </ChecOption>
            <ChecOption :option="{ disabled: true }">
              Disabled action
            </ChecOption>
          </ChecOptionsMenu>
        </div>
      </div>`
    }}
  </Story>
</Preview>

## With custom button content

<Preview>
  <Story name="Custom button">
    {{
      components: {
        ChecOption,
        ChecOptionsMenu,
        ChecIcon,
        ChecNavIcon,
      },
      methods: {
        action: action('option-selected'),
      },
      template: `
      <div class="p-16 flex justify-center font-lato w-full text-gray-500">
         <div class="w-64 mt-32 relative">
          <ChecOptionsMenu menu-placement="right-end" :open="false">
            <ChecOption @option-selected="action">
              Edit record
            </ChecOption>
            <ChecOption @option-selected="action">
              Check for changes
            </ChecOption>
            <ChecOption @option-selected="action" destructive>
              Delete record
            </ChecOption>
            <ChecOption :option="{ disabled: true }">
              Disabled action
            </ChecOption>
            <template #button-content>
              <div class="flex items-center min-w-sm">
                <ChecNavIcon class="w-6 mr-2" icon="account" />
                <span class="flex-grow">User name</span>
                <ChecIcon size="sm" icon="right" class="ml-2" />
              </div>
            </template>
          </ChecOptionsMenu>
        </div>
      </div>`
    }}
  </Story>
</Preview>