import React from 'react';
import styled, { css } from 'styled-components';

type TabProps = {
  label: string;
  isActive: boolean;
  tabId: string;
  setRef: (element: HTMLButtonElement | null) => void;
  onClick: () => void;
  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
};
export function TabComponent(props: TabProps): JSX.Element {
  const { label, isActive, setRef, onClick, onKeyDown, tabId } = props;

  return (
    <TabItem data-component-name="Markdoc/Tabs/Tab">
      <TabButtonLink
        $active={isActive}
        id={`tab-${tabId}`}
        role="tab"
        aria-controls={`panel-${tabId}`}
        aria-selected={isActive ? 'true' : 'false'}
        tabIndex={isActive ? 0 : -1}
        data-label={label}
        ref={setRef}
        onKeyDown={onKeyDown}
        onClick={onClick}
      >
        {label}
      </TabButtonLink>
    </TabItem>
  );
}

export const Tab = styled(TabComponent)``;

const TabItem = styled.li`
  display: inline-flex;
  list-style: none;
  cursor: pointer;
  align-items: center;

  &:first-child {
    margin-bottom: 0px;
  }
  *:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
  }
`;

const TabButtonLink = styled.button<{ $active: boolean }>`
  all: unset;
  flex-grow: 1;
  cursor: pointer;
  width: 100%;
  text-align: center;

  color: var(--md-tabs-tab-text-color);
  padding: var(--md-tabs-tab-padding);
  font-size: var(--md-tabs-tab-font-size);
  font-family: var(--md-tabs-tab-font-family);
  font-style: var(--md-tabs-tab-font-style);
  font-weight: var(--md-tabs-tab-font-weight);
  background-color: var(--md-tabs-tab-bg-color);
  border-radius: var(--md-tabs-tab-border-radius);
  border: var(--md-tabs-tab-border);
  border-width: var(--md-tabs-tab-border-width);

  ${({ $active }) =>
    $active
      ? css`
          color: var(--md-tabs-active-tab-text-color);
          font-size: var(--md-tabs-active-tab-font-size);
          font-family: var(--md-tabs-active-tab-font-family);
          font-style: var(--md-tabs-active-tab-font-style);
          font-weight: var(--md-tabs-active-tab-font-weight);
          background-color: var(--md-tabs-active-tab-bg-color);
          border-radius: var(--md-tabs-active-tab-border-radius);
          padding: var(--md-tabs-active-tab-padding);
          border: solid var(--md-tabs-active-tab-border-color);
          border-width: var(--md-tabs-active-tab-border-width);
        `
      : css`
          &:hover {
            color: var(--md-tabs-hover-tab-text-color);
            font-size: var(--md-tabs-hover-tab-font-size);
            font-family: var(--md-tabs-hover-tab-font-family);
            font-style: var(--md-tabs-hover-tab-font-style);
            font-weight: var(--md-tabs-hover-tab-font-weight);
            background-color: var(--md-tabs-hover-tab-bg-color);
            border-radius: var(--md-tabs-hover-tab-border-radius);
            padding: var(--md-tabs-hover-tab-padding);
            border: solid var(--md-tabs-hover-tab-border-color);
            border-width: var(--md-tabs-hover-tab-border-width);
          }
        `}
`;