import { css } from '@leafygreen-ui/emotion';
import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
import { palette } from '@leafygreen-ui/palette';
import { transitionDuration } from '@leafygreen-ui/tokens';

export const orgNavHeight = 60;
export const caretClassName = createUniqueClassName('caret');
export const logoMarkClassName = createUniqueClassName('logo');
export const orgNavLinkWrapperClassName = createUniqueClassName('wrapper');

export const openOrgMenuThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    background: ${palette.gray.light2};
  `,
  [Theme.Dark]: css`
    background: ${palette.gray.dark3};
  `,
};

export const caretBaseStyle = css`
  transition: color ${transitionDuration.default}ms ease-in-out;
`;

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

export const caretOpenThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    color: ${palette.gray.dark2};
  `,
  [Theme.Dark]: css`
    color: ${palette.gray.light2};
  `,
};

export const logoLinkStyles = css`
  margin-right: 4px;
  z-index: 1;

  :focus,
  :focus-visible {
    outline: none;
  }

  .${logoMarkClassName} {
    border-radius: 4px;
    /* Setting negative margin, & outline offset to cover up a double-shadow artifact */
    margin: -1px;
    outline-offset: -1px;
    padding: 1px;
    transition: box-shadow ${transitionDuration.faster}ms ease-in-out;
  }
`;

export const logoLinkFocusThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    :focus-visible {
      .${logoMarkClassName} {
        outline: 2px solid ${palette.white};
        box-shadow: 0 0 0 3px ${palette.white}, 0 0 0 5px ${palette.green.dark1};
      }
    }
  `,
  [Theme.Dark]: css`
    :focus-visible {
      .${logoMarkClassName} {
        outline: 2px solid ${palette.black};
        box-shadow: 0 0 0 3px ${palette.black}, 0 0 0 5px ${palette.green.dark1};
      }
    }
  `,
};

export const orgNavContainerBaseStyle = css`
  z-index: 1;
  height: ${orgNavHeight}px;
`;

export const orgNavContainerThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    border-bottom: 1px solid ${palette.gray.light2};
  `,
  [Theme.Dark]: css`
    border-bottom: 1px solid ${palette.gray.dark2};
  `,
};