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

export const subMenuClassName = createUniqueClassName();

export const triggerWrapper = css`
  display: inline-block;
  position: relative;
  z-index: 0;
  font-family: ${fontFamilies.default};
`;

export const truncate = css`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

export const menuBaseStyle = css`
  width: 300px;
  font-weight: normal;
  overflow: auto;
  padding: 0;
  font-family: ${fontFamilies.default};
  font-size: ${typeScales.body1.fontSize}px;
  line-height: ${typeScales.body1.lineHeight}px;
`;

export const menuThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css``,
  [Theme.Dark]: css`
    background-color: ${palette.gray.light3};
  `,
};

export const mfaBannerBaseStyle = css`
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 14px;

  white-space: nowrap;
`;

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

export const linkColorStyle = css`
  &,
  &:hover {
    color: inherit;
  }
`;

export const headerBaseStyle = css`
  padding: 24px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 100%;
  margin-bottom: 1px;
`;

export const headerThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    background-color: ${palette.gray.dark3};
    color: ${palette.white};
  `,
  [Theme.Dark]: css`
    background-color: ${palette.gray.light1};
    color: ${palette.black};
  `,
};

export const logoMarkBaseStyle = css`
  width: 42px;
  height: 42px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
`;

export const logoMarkThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    background-color: ${palette.black};
  `,
  [Theme.Dark]: css`
    background-color: ${palette.white};
  `,
};

export const nameStyle = css`
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  margin: 0px;
  max-width: 100%;
`;

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

export const subMenuContainerBaseStyle = css`
  pointer-events: inherit;

  &[aria-disabled='true'] {
    button {
      pointer-events: none;
    }
  }
`;

export const subMenuContainerThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css``,
  [Theme.Dark]: css`
    background-color: ${palette.gray.light3};

    button {
      svg {
        color: ${palette.gray.base};
      }
    }

    &[aria-disabled='false'] {
      &:hover {
        background-color: ${palette.gray.light2};

        button {
          svg {
            color: ${palette.gray.base};
          }
        }
      }

      button {
        background-color: ${palette.gray.light3};

        &:hover {
          svg {
            color: ${palette.black};
          }
        }
      }
    }
  `,
};

export const subMenuActiveContainerStyle = css`
  pointer-events: none;

  // Ensure that users can still click on the icon button
  [data-leafygreen-ui='icon-button'] {
    pointer-events: all;
  }
`;

export const productLinkBaseStyle = css`
  font-size: ${typeScales.body1.fontSize};
  display: flex;
  align-items: center;
`;

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

    .${subMenuClassName} {
      &:is(:hover, :focus) & {
        color: ${palette.blue.light1};
      }
    }
  `,
  [Theme.Dark]: css`
    color: ${palette.blue.base};

    .${subMenuClassName} {
      &:is(:hover, :focus) & {
        color: ${palette.blue.base};
      }
    }
  `,
};

export const productLinkIconStyle = css`
  height: 10px;
  width: 10px;
  opacity: 0;
  transform: translate3d(-3px, 0, 0px);
  transition: all ${transitionDuration.faster}ms ease-in;
  color: currentColor;

  .${subMenuClassName} {
    &:is(:hover, :focus) & {
      opacity: 1;
      transform: translate3d(3px, 0, 0px);
    }
  }
`;

export const subMenuItemStyle = css`
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
`;

export const descriptionStyle = css`
  font-size: 12px;
  line-height: 14px;
  text-decoration: none;
  margin-top: 0px;
  margin-bottom: 16px;
  max-width: 100%;
`;