import { css } from '@leafygreen-ui/emotion';
import { Theme } from '@leafygreen-ui/lib';
import { palette } from '@leafygreen-ui/palette';
import {
  focusRing,
  fontFamilies,
  spacing,
  transitionDuration,
  typeScales,
} from '@leafygreen-ui/tokens';

import { linkDisabledStyle } from '../../styles';
import { caretClassName, orgNavLinkWrapperClassName } from '../OrgNav.styles';

export const orgNavAnchorThemeOverrides: Record<Theme, string> = {
  [Theme.Light]: css`
    &:visited,
    &:link,
    &:hover {
      color: ${palette.black};
    }

    &:active {
      color: ${palette.green.dark2};
    }
  `,
  [Theme.Dark]: css`
    &:visited,
    &:link,
    &:hover {
      color: ${palette.gray.light2};
    }

    &:active {
      color: ${palette.green.base};
    }
  `,
};

export const orgNavLinkBaseStyle = css`
  position: relative;
  text-decoration: none;
  padding: 9px;
  font-family: ${fontFamilies.default};
  border-radius: ${spacing[2]}px;
  transition: box-shadow ${transitionDuration.faster}ms ease-in-out;

  font-size: ${typeScales.body1.fontSize}px;

  .${orgNavLinkWrapperClassName} {
    position: relative;

    &:after {
      content: '';
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      opacity: 0;
      transform: scale(0.8, 1);
      transition: ${transitionDuration.default}ms ease-in-out;
      height: 3px;
      border-radius: 200px;
    }
  }

  &:hover {
    .${orgNavLinkWrapperClassName}:after {
      opacity: 1;
      transform: scale(1);
    }
  }
`;

export const orgNavLinkThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    color: ${palette.black};

    &:hover {
      .${orgNavLinkWrapperClassName}:after {
        background-color: ${palette.gray.light2};
      }
    }
  `,
  [Theme.Dark]: css`
    color: ${palette.gray.light2};

    &:hover {
      .${orgNavLinkWrapperClassName}:after {
        background-color: ${palette.gray.base};
      }
    }
  `,
};

export const activeLinkBaseStyle = css`
  &,
  &:hover {
    font-weight: bold;
  }
`;

export const activeLinkThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    &,
    &:link,
    &:hover {
      color: ${palette.green.dark2};
    }
  `,
  [Theme.Dark]: css`
    &,
    &:link,
    &:hover {
      color: ${palette.green.base};
    }
  `,
};

export const navItemFocusBaseStyle = css`
  &:focus-visible {
    outline: none;

    .${orgNavLinkWrapperClassName}:after {
      opacity: 1;
      transform: scale(1);
    }
  }
`;

export const navItemFocusThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    &:focus-visible {
      &,
      &:hover {
        color: ${palette.blue.base};
      }

      .${orgNavLinkWrapperClassName}:after {
        background-color: ${palette.blue.light1};
      }

      .${caretClassName} {
        color: ${palette.blue.base};
      }
    }
  `,
  [Theme.Dark]: css`
    &:focus-visible {
      &,
      &:hover {
        color: ${palette.blue.light1};
      }

      .${orgNavLinkWrapperClassName}:after {
        background-color: ${palette.blue.base};
      }

      .${caretClassName} {
        color: ${palette.blue.light1};
      }
    }
  `,
};

export const displayFlex = css`
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
`;

export const resetButtonStyles = css`
  border: none;
  background-color: transparent;
  cursor: pointer;

  &:focus {
    outline: none;
  }
`;

export const orgNavLinkDisabledBaseStyle = css`
  ${linkDisabledStyle};

  // Remove hover underline
  .${orgNavLinkWrapperClassName}:after {
    content: unset;
  }
`;

export const orgNavLinkDisabledThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    .${caretClassName} {
      color: ${palette.gray.light1};
    }
  `,
  [Theme.Dark]: css`
    .${caretClassName} {
      color: ${palette.gray.dark1};
    }
  `,
};

export const orgNavLinkDisabledFocusThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    &:focus-visible {
      background-color: ${palette.gray.light3};
      box-shadow: ${focusRing.light.default};

      &,
      &:hover {
        color: ${palette.gray.base};
      }
    }
  `,
  [Theme.Dark]: css`
    &:focus-visible {
      background-color: ${palette.gray.light3};
      box-shadow: ${focusRing.dark.default};

      &,
      &:hover {
        color: ${palette.gray.base};
      }
    }
  `,
};