import { commonArgTypes } from '@/lib/constants';
import type { Meta } from '@storybook/vue3';
import { sizeOptions } from '@/lib/constants';
import Popover from '@/lib/components/Popover';
import Button from '@/lib/components/Button';
import Label from '@/lib/components/Label';
import Header from '@/lib/components/Header';
import TextArea from '@/lib/components/TextArea';
import { ISize } from '@/lib/types';

const meta = {
  title: 'Feedback Component/Popover',
  component: Popover.Root,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '특정 개체 위에 포인트를 클릭했을 때 제공되는 컨테이너 요소'
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'popover 둥글기'
    },
    size: {
      ...commonArgTypes.size,
      table: {
        category: 'Props',
        type: {
          summary: sizeOptions.filter((value: ISize) => value != 'x-small').join(' | ')
        }
      },
      options: sizeOptions.filter((value: ISize) => value != 'x-small'),
      description: 'popover 크기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'popover 비율'
    }
  },
  args: {
    size: 'medium'
  }
} as Meta;
export default meta;

export const Default = {
  render: (args: {}) => ({
    components: {
      PopoverRoot: Popover.Root,
      PopoverTrigger: Popover.Trigger,
      PopoverContent: Popover.Content,
      PopoverClose: Popover.Close,
      Button,
      Label,
      Header
    },
    setup() {
      return { args };
    },
    template: `
    <PopoverRoot v-bind='args'>
      <PopoverTrigger>
        <Button appearance="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <div class="grid gap-4">
          <div class="space-y-1">
            <Header size="3">
              Dimensions
            </Header>
            <p class="text-sm text-slateA-11">
              Set the dimensions for the layer.
            </p>
          </div>
          <div class="grid gap-2">
            <div class="grid grid-cols-3 items-center gap-4">
              <Label for="width">Width</Label>
              <input
                id="width"
                type="text"
                default-value="100%"
                class="col-span-2 h-8 border rounded-md border-[#e5e7eb]"
              />
            </div>
            <div class="grid grid-cols-3 items-center gap-4">
              <Label for="maxWidth">Max. width</Label>
              <input
                id="maxWidth"
                type="text"
                default-value="300px"
                class="col-span-2 h-8 border rounded-md border-[#e5e7eb]"
              />
            </div>
            <div class="grid grid-cols-3 items-center gap-4">
              <Label for="height">Height</Label>
              <input
                id="height"
                type="text"
                default-value="25px"
                class="col-span-2 h-8 border rounded-md border-[#e5e7eb]"
              />
            </div>
            <div class="grid grid-cols-3 items-center gap-4">
              <Label for="maxHeight">Max. height</Label>
              <input
                id="maxHeight"
                type="text"
                default-value="none"
                class="col-span-2 h-8 border rounded-md border-[#e5e7eb]"
              />
            </div>
          </div>
          <div className="mt-3 flex justify-end">
          <PopoverClose>
            <Button>
              Comment
            </Button>
          </PopoverClose>
        </div>
        </div>
      </PopoverContent>
    </PopoverRoot>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
 <PopoverRoot>
    <PopoverTrigger>
      <Button appearance="outline">Open popover</Button>
    </PopoverTrigger>
    <PopoverContent>
      <div class="grid gap-4">
        <div class="space-y-1">
          <Header size="3">Dimensions</Header>
          <p class="text-sm text-slateA-11">
            Set the dimensions for the layer.
          </p>
        </div>
        <div class="grid gap-2">
          <div class="grid grid-cols-3 items-center gap-4">
            <Label for="width">Width</Label>
            <input
              id="width"
              type="text"
              default-value="100%"
              class="col-span-2 h-8 border rounded-md border-[#e5e7eb]"
            />
          </div>
          <div class="grid grid-cols-3 items-center gap-4">
            <Label for="maxWidth">Max. width</Label>
            <input
              id="maxWidth"
              type="text"
              default-value="300px"
              class="col-span-2 h-8 border rounded-md border-[#e5e7eb]"
            />
          </div>
          <div class="grid grid-cols-3 items-center gap-4">
            <Label for="height">Height</Label>
            <input
              id="height"
              type="text"
              default-value="25px"
              class="col-span-2 h-8 border rounded-md border-[#e5e7eb]"
            />
          </div>
          <div class="grid grid-cols-3 items-center gap-4">
            <Label for="maxHeight">Max. height</Label>
            <input
              id="maxHeight"
              type="text"
              default-value="none"
              class="col-span-2 h-8 border rounded-md border-[#e5e7eb]"
            />
          </div>
        </div>
        <div className="mt-3 flex justify-end">
        <PopoverClose>
          <Button>Comment</Button>
        </PopoverClose>
      </div>
      </div>
    </PopoverContent>
  </PopoverRoot>
</template>
        `
      }
    }
  }
};

export const WithClose = {
  render: (args: {}) => ({
    components: {
      PopoverRoot: Popover.Root,
      PopoverTrigger: Popover.Trigger,
      PopoverContent: Popover.Content,
      PopoverClose: Popover.Close,
      Button,
      Label,
      Header,
      TextArea
    },
    setup() {
      return { args };
    },
    template: `
    <PopoverRoot v-bind='args'>
      <PopoverTrigger>
        <Button appearance="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <div class="grid gap-4">
          <div class="space-y-1">
            <Header size="3">
              Dimensions
            </Header>
          </div>
          <div className="grow">
            <TextArea placeholder="Write a comment…" className="w-full" />
            <div className="mt-3 flex justify-end">
              <PopoverClose>
                <Button>
                  Comment
                </Button>
              </PopoverClose>
            </div>
          </div>
        </div>
      </PopoverContent>
    </PopoverRoot>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <PopoverRoot>
    <PopoverTrigger>
      <Button appearance="outline">Open popover</Button>
    </PopoverTrigger>
    <PopoverContent>
      <div class="grid gap-4">
        <div class="space-y-1">
          <Header size="3">Dimensions</Header>
        </div>
        <div className="grow">
          <TextArea placeholder="Write a comment…" className="w-full" />
          <div className="mt-3 flex justify-end">
            <PopoverClose>
              <Button>Comment</Button>
            </PopoverClose>
          </div>
        </div>
      </div>
    </PopoverContent>
  </PopoverRoot>
</template>
        `
      }
    }
  }
};