import Button from '@/lib/components/Button/Button.vue';
import Toast from '@/lib/components/Toast';
import { commonArgTypes, sizeOptions } from '@/lib/constants';
import type { Meta } from '@storybook/vue3';
import { ref } from 'vue';

const meta = {
  title: 'Feedback Component/Toast',
  component: Toast,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: '팝업 UI형태로 화면 하단에 일시적으로 노출되는 메시지 창'
      },
      source: {
        type: 'code'
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'Toast border 둥굴기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'Toast 비율'
    },
    size: {
      ...commonArgTypes.size,
      table: {
        category: 'Props',
        type: {
          summary: sizeOptions.filter((option) => option !== 'x-small').join(' | ')
        }
      },
      options: sizeOptions.filter((option) => option !== 'x-small'),
      description: 'Toast 크기'
    },
    color: {
      table: {
        category: 'Props',
        type: { summary: ['danger', 'warning', 'success', 'information'].join(' | ') }
      },
      options: ['danger', 'warning', 'success', 'information'],
      control: { type: 'select' },
      defaultValue: { summary: 'none' },
      description: 'Toast 색'
    }
  }
} as Meta;

export default meta;

const toastComponent = {
  ToastRoot: Toast.Root,
  ToastTitle: Toast.Title,
  ToastDescription: Toast.Description,
  ToastActionButton: Toast.ActionButton,
  Button
};

export const Default = {
  render: (args: any) => ({
    components: toastComponent,
    setup() {
      const open = ref(false);

      const handleShowToast = () => {
        open.value = true;
      };

      const handleClickActionButton = () => {
        open.value = false;
      };

      return { args, open, handleShowToast, handleClickActionButton };
    },
    template: `
      <div>
        <Button @click="handleShowToast">Show Toast</Button>
        <Teleport to="body">
          <ToastRoot v-bind='args' :open>
            <ToastTitle>토스트 제목</ToastTitle>
            <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
            <ToastActionButton altText='닫기' @click="handleClickActionButton">닫기</ToastActionButton>
          </ToastRoot>
        </Teleport>
      </div>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<script>
const open = ref(false);

const handleShowToast = () => {
  open.value = true;
};

const handleClickActionButton = () => {
  open.value = false;
};
</script>
<template>
  <div>
    <Button @click="handleShowToast">Show Toast</Button>
    <ToastRoot :open="open">
      <ToastTitle>토스트 제목</ToastTitle>
      <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
      <ToastActionButton altText='닫기' @click="handleClickActionButton">닫기</ToastActionButton>
    </ToastRoot>
  </div>
</template>`
      }
    }
  }
};

export const Color = {
  render: (args: any) => ({
    components: toastComponent,
    setup() {
      const open = ref(false);
      const semanticColor = ref('information');

      const colorMapping = {
        sky: 'information',
        red: 'danger',
        yellow: 'warning',
        green: 'success'
      };

      const handleShowToast = (color: 'sky' | 'red' | 'yellow' | 'green') => {
        open.value = true;
        semanticColor.value = colorMapping[color];
      };

      const handleClickActionButton = () => {
        open.value = false;
      };

      return {
        args,
        open,
        semanticColor,
        handleShowToast,
        handleClickActionButton
      };
    },
    template: `
      <div className="flex items-center gap-5">
        <Button color="sky" @click="() => handleShowToast('sky')">Information Toast</Button>
        <Button color="red" @click="() => handleShowToast('red')">Danger Toast</Button>
        <Button color="yellow" @click="() => handleShowToast('yellow')">Warning Toast</Button>
        <Button color="green" @click="() => handleShowToast('green')">Success Toast</Button>

        <Teleport to="body">
          <ToastRoot v-bind='args' :open :color="semanticColor">
            <ToastTitle>토스트 제목</ToastTitle>
            <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
            <ToastActionButton altText='닫기' @click="handleClickActionButton">닫기</ToastActionButton>
          </ToastRoot>
        </Teleport>
      </div>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <ToastRoot color="information">
    <ToastTitle>토스트 제목</ToastTitle>
    <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
    <ToastActionButton altText='닫기' @click="handleClickActionButton">닫기</ToastActionButton>
  </ToastRoot>
  <ToastRoot color="danger">
    <ToastTitle>토스트 제목</ToastTitle>
    <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
    <ToastActionButton altText='닫기' @click="handleClickActionButton">닫기</ToastActionButton>
  </ToastRoot>
  <ToastRoot color="warning">
    <ToastTitle>토스트 제목</ToastTitle>
    <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
    <ToastActionButton altText='닫기' @click="handleClickActionButton">닫기</ToastActionButton>
  </ToastRoot>
  <ToastRoot color="success">
    <ToastTitle>토스트 제목</ToastTitle>
    <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
    <ToastActionButton altText='닫기' @click="handleClickActionButton">닫기</ToastActionButton>
  </ToastRoot>
</template>`
      }
    }
  }
};

export const NoTitleToast = {
  render: (args: any) => ({
    components: toastComponent,
    setup() {
      const open = ref(false);

      const handleShowToast = () => {
        open.value = true;
      };

      const handleClickActionButton = () => {
        open.value = false;
      };

      return { open, handleShowToast, handleClickActionButton, args };
    },
    template: `
      <div>
        <Button @click="handleShowToast">Show Toast</Button>
        <Teleport to="body">
          <ToastRoot v-bind='args' :open="open">
            <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
            <ToastActionButton altText='닫기' @click="handleClickActionButton">닫기</ToastActionButton>
          </ToastRoot>
        </Teleport>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <div>
    <Button @click="handleShowToast">Show Toast</Button>
    <ToastRoot :open="isOpen">
      <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
      <ToastActionButton altText='닫기' @click="handleClickActionButton">닫기</ToastActionButton>
    </ToastRoot>
  </div>
</template>`
      }
    }
  }
};

export const NoButtonToast = {
  render: (args: any) => ({
    components: toastComponent,
    setup() {
      const open = ref(false);

      const handleShowToast = () => {
        open.value = true;
      };

      const handleClickActionButton = () => {
        open.value = false;
      };

      return { open, handleShowToast, handleClickActionButton, args };
    },
    template: `
      <div>
        <Button @click="handleShowToast">Show Toast</Button>
        <Teleport to="body">
          <ToastRoot v-bind='args' :open="open">
            <ToastTitle>토스트 제목</ToastTitle>
            <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
          </ToastRoot>
        </Teleport>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <div>
    <Button @click="handleShowToast">Show Toast</Button>
    <ToastRoot :open="open">
      <ToastTitle>토스트 제목</ToastTitle>
      <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
    </ToastRoot>
  </div>
</template>`
      }
    }
  }
};