import { css } from 'styled-components';
import { VariantOfType } from '../../variants';

export const DrawerBackdropCss = css`
  position: fixed;
  inset: 0px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;

  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

  &[data-enter] {
    opacity: 1;
  }

  &[data-leave] {
    opacity: 0;
  }
`;

export const DrawerDialogCss = css`
  position: fixed;
  vertical-align: middle;
  overflow: auto;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  box-sizing: border-box;
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-900);
  box-shadow: var(--shadow-lg);
  outline: none;
  font-size: 1em;
  margin: 0;
  z-index: 1000;
  transition-property: opacity, transform;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.1, 0.6, 0.1, 1);

  opacity: 0;

  &[data-enter] {
    opacity: 1;
  }

  &[data-leave] {
    opacity: 0;
    transition-timing-function: cubic-bezier(0.1, 0.2, 0.1, 1);
  }

  &.top,
  &.bottom {
    left: 0;
    width: 100%;
    max-height: 50vw;
  }

  &.left,
  &.right {
    top: 0;
    height: 100%;
    max-width: 50vw;
  }

  &.top {
    top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    &,
    &[data-leave] {
      transform: translate3d(0, -100%, 0);
    }

    &[data-enter] {
      transform: translate3d(0, 0, 0);
    }
  }

  &.left {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    &,
    &[data-leave] {
      transform: translate3d(-100%, 0, 0);
    }

    &[data-enter] {
      transform: translate3d(0, 0, 0);
    }
  }

  &.bottom {
    bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    &,
    &[data-leave] {
      transform: translate3d(0, 100%, 0);
    }

    &[data-enter] {
      transform: translate3d(0, 0, 0);
    }
  }

  &.right {
    right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    &,
    &[data-leave] {
      transform: translate3d(100%, 0, 0);
    }

    &[data-enter] {
      transform: translate3d(0, 0, 0);
    }
  }

  &.center {
    inset: 0;

    &,
    &[data-leave] {
      transform: scale(0.9);
    }

    &[data-enter] {
      transform: scale(1);
    }
  }
`;

export const DrawerHeaderCss = css`
  flex-shrink: 0;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem;
`;

export const DrawerTitleCss = css`
`;

export const DrawerSubtitleCss = css`
  font-weight: normal;
  display: inline-block;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.5em;
  text-align: center;
  word-break: break-word;
  text-transform: uppercase;
  color: var(--color-primary-500);
`;

export const DrawerContentCss = css`
  position: relative;
  padding: 1rem;
  font-size: 1rem;
  text-align: left;

  & > :global(*:first-child) {
    margin-top: 0;
  }

  & > :global(*:last-child) {
    margin-bottom: 0;
  }
`;

export const DrawerDismissCss = css`

`;

export const drawerVariants = {
  default: {
    backdrop: DrawerBackdropCss,
    content: DrawerContentCss,
    dismiss: DrawerDismissCss,
    dialog: DrawerDialogCss,
    header: DrawerHeaderCss,
    subtitle: DrawerSubtitleCss,
    title: DrawerTitleCss,
  },
};

export type IDrawerVariants = VariantOfType<typeof drawerVariants>;