import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import React, { useEffect, useId, useState } from 'react';

import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';
import { Tooltip } from '@/components/tooltip/Tooltip';

export type Option<T extends string> = {
  value: T;
  label: React.ReactNode;
  tooltip?: React.ReactNode;
};

const TabButton = styled.button`
  width: auto;
  height: 34px;
  font-size: 14px;
  padding: 0 12px;
  display: flex;
  flex-direction: row;
  flex: 1;
  white-space: nowrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-foreground-primary);
  z-index: 1;
  transition: color 0.2s;

  &.active {
    cursor: default;
  }
`;

const TabOverlay = styled(motion.div)`
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 20px;
  background: var(--color-background-glass-thick);
  z-index: 0;
  transition: background 0.2s;
`;

const TabContent = styled.span`
  z-index: 2;
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  align-items: center;
  user-select: none;
  white-space: nowrap;
  position: relative;
`;

const AnimatedTabs = <T extends string>({
  options,
  onChange,
  value,
}: {
  value?: T;
  options: Option<T>[];
  onChange: (option: Option<T>) => void;
}) => {
  const [activeOption, setActiveOption] = useState(value || options[0].value);
  const uniqueId = useId();

  useEffect(() => {
    if (value) {
      setActiveOption(value);
    }
  }, [value]);

  return (
    <Button
      variant={ButtonVariant.Secondary}
      shape={ButtonShape.Pill}
      className='h-[40px] p-[3px]'
    >
      <span className='flex flex-1 items-center justify-stretch gap-0'>
        {options.map((option) => (
          <Tooltip
            label={option.tooltip ?? ''}
            placement='bottom'
            key={option.value}
          >
            <TabButton
              onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  setActiveOption(option.value);
                  onChange(option);
                  e.preventDefault();
                  e.stopPropagation();
                }
              }}
              onMouseDown={(e) => {
                setActiveOption(option.value);
                onChange(option);
                e.stopPropagation();
              }}
              className={option.value === activeOption ? 'active' : ''}
            >
              {option.value === activeOption ? (
                <TabOverlay
                  layoutId={`active-tab-overlay-${uniqueId}`}
                  initial={false}
                  transition={{
                    type: 'spring',
                    bounce: 0.05,
                    duration: 0.3,
                  }}
                />
              ) : null}
              <TabContent>{option.label}</TabContent>
            </TabButton>
          </Tooltip>
        ))}
      </span>
    </Button>
  );
};

export default AnimatedTabs;