import * as Ariakit from '@ariakit/react';
import { getClassNames } from '@websolutespa/bom-core';
import React, { forwardRef, ReactNode, useContext } from 'react';
import styled from 'styled-components';
import { getVariantKey } from '../../variants';
import { UIStyledComponentProps } from '../types';
import { getCssResponsive } from '../utils';
import { TabsContext } from './tabs.context';
import { ITabsVariants, tabsVariants } from './tabs.variants';

const TabsStyle = styled(Ariakit.TabList) <TabsProps>`
  ${props => getVariantKey('tabs', props.variant, props.variants)}
  ${props => getCssResponsive(props)}
`;

export type TabsProps = Ariakit.TabListProps & UIStyledComponentProps<{
  className?: string;
  tabs?: boolean;
  variant?: keyof typeof tabsVariants | (string & {});
  variants?: ITabsVariants;
  children?: ReactNode;
}>;

export const Tabs = forwardRef<HTMLDivElement, React.PropsWithChildren<TabsProps>>(
  function Tabs({
    tabs = true,
    className,
    variant = 'default',
    variants,
    children,
    ...props
  }, ref) {
    const context = useContext(TabsContext);
    const classNames = getClassNames('tabs', className);
    return (
      <TabsStyle
        className={classNames}
        variant={variant || context.variant}
        variants={variants || context.variants}
        ref={ref}
        {...props}
      >
        {children}
      </TabsStyle>
    );
  });

Tabs.displayName = 'Tabs';