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

export const TabsGroupCss = css`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
`;

export const TabsCss = css`
  position: relative;
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-neutral-200);
`;

export const TabsTitleCss = css`
  position: relative;
  display: inline-flex;
  align-items: center;
  column-gap: 0.5em;
  padding: 0.35rem 0.75rem 0.5rem 0.75rem;
  font-size: 1em;
  line-height: normal;
  color: var(--color-neutral-600);
  transition: ease 150ms;
  transition-property: background-color, border-color, color, opacity, text-decoration-color, text-underline-offset;
  user-select: none;
  cursor: pointer;

  &[aria-selected=true] {
    color: var(--color-neutral-900);

    :after {
      display: block;
      content: '';
      position: absolute;
      width: 100%;
      inset: 0;
      top: unset;
      bottom: 0;
      height: 2px;
      background: var(--color-primary-500);
      // view-animation-name: tab-animated-group;
    }
  }

  &[aria-disabled=true] {
    opacity: 0.5;
  }

  &:hover {
    background-color: var(--color-neutral-200);

    &[aria-selected=true] {
      background-color: var(--color-neutral-200);
    }
  }
`;

export const TabsContentsCss = css`
`;

export const TabsContentCss = css`
  display: grid;
  grid-template-rows: 0fr;
  transition-property: grid-template-rows;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;

  .tabs__clipped {
    overflow: hidden;
  }

  .tabs__inner {
    padding: 1rem 0;
  }

  &[data-enter] {
    grid-template-rows: 1fr;
  }
`;

export const tabsVariants = {
  default: {
    group: TabsGroupCss,
    content: TabsContentCss,
    contents: TabsContentsCss,
    tabs: TabsCss,
    title: TabsTitleCss,
  },
};

export type ITabsVariants = VariantOfType<typeof tabsVariants>;