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

import { mq } from '../../breakpoints';
import { anchorOverrides, linkDisabledStyle } from '../../styles';

export const tabContentClassName = createUniqueClassName('tab-content');
export const blobClassName = createUniqueClassName('brand-shape');
const minProductTabWidth = 100;
const tabUnderlineOverflow = 8;

export const projectNavAnchorOverrides = css`
  a:visited,
  a:active,
  a:link {
    color: ${palette.gray.dark2};
  }

  a:focus {
    outline: none;
  }
`;

export const productTabsWrapperStyle = css`
  display: flex;
  align-self: stretch;
  position: relative;
`;

export const productTabBaseStyle = css`
  ${anchorOverrides};
  ${projectNavAnchorOverrides};

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: ${minProductTabWidth}px;

  text-decoration: none;
  font-size: ${typeScales.body1.fontSize}px;
  line-height: ${typeScales.body1.lineHeight}px;
  transition: ${transitionDuration.faster}ms color ease-in-out;
  font-weight: 400;
  padding: 0 ${tabUnderlineOverflow * 2}px;
  border-radius: 12px;
  transition: ${transitionDuration.faster}ms ease-in-out;
  transition-property: box-shadow, font-weight;

  &:hover {
    font-weight: 700;

    .${tabContentClassName} {
      &:after {
        transform: scale3d(1, 1, 1);
      }
    }
  }

  ${mq({
    padding: [
      // Why this order? Because 🤷‍♂️
      `0 ${tabUnderlineOverflow * 2}px`, // 1024+
      `0 ${tabUnderlineOverflow}px`, // < 768
      `0 ${tabUnderlineOverflow * 2}px`, // 768 - 1024
    ],
    minWidth: [`100px`, `80px`, `100px`],
  })};

  .${blobClassName} {
    fill: rgba(255, 255, 255, 0);
  }
`;

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

    &:hover {
      color: ${palette.black};

      .${tabContentClassName} {
        &:after {
          background-color: ${palette.gray.light1};
        }
      }

      .${blobClassName} {
        fill: ${palette.gray.light3};
      }
    }
  `,
  [Theme.Dark]: css`
    color: ${palette.gray.light2};

    &:hover {
      color: ${palette.gray.light2};

      .${tabContentClassName} {
        &:after {
          background-color: ${palette.gray.base};
        }
      }

      .${blobClassName} {
        fill: ${palette.gray.dark3};
      }
    }
  `,
};

export const tabActiveBaseStyle = css`
  font-weight: 700;

  &,
  &:hover {
    .${tabContentClassName} {
      &:after {
        transform: scale3d(1, 1, 1);
      }
    }
  }
`;

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

    &:hover {
      color: ${palette.green.dark3};
    }

    &,
    &:hover {
      .${tabContentClassName} {
        &:after {
          background-color: ${palette.green.dark1};
        }
      }

      .${blobClassName} {
        fill: ${palette.green.light3};
      }
    }
  `,
  [Theme.Dark]: css`
    color: ${palette.green.base};

    &:hover {
      color: ${palette.gray.light2};
    }

    &,
    &:hover {
      .${tabContentClassName} {
        &:after {
          background-color: ${palette.green.dark1};
        }
      }

      .${blobClassName} {
        fill: ${palette.green.dark3};
      }
    }
  `,
};

export const tabFocusBaseStyle = css`
  outline: none;

  &:focus-visible {
    .${tabContentClassName} {
      &:after {
        transform: scale3d(1, 1, 1);
      }
    }
  }
`;

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

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

      .${blobClassName} {
        fill: ${palette.blue.light3};
      }
    }
  `,
  [Theme.Dark]: css`
    &:focus-visible {
      color: ${palette.blue.light3};

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

      .${blobClassName} {
        fill: ${palette.blue.dark3};
      }
    }
  `,
};

export const tabDisabledThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    ${linkDisabledStyle};

    .${tabContentClassName} {
      &:after {
        content: unset;
      }
    }

    .${blobClassName} {
      fill: ${palette.gray.light3};
    }
  `,
  [Theme.Dark]: css`
    &,
    &:hover {
      cursor: not-allowed;
      color: ${palette.gray.dark1};
      font-weight: unset;
    }

    .${tabContentClassName} {
      &:after {
        content: unset;
      }
    }

    &:hover {
      .${blobClassName} {
        fill: ${palette.gray.dark4};
      }
    }

    .${blobClassName} {
      fill: ${palette.gray.dark4};
    }
  `,
};

export const tabDisabledFocusThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    &:focus-visible {
      ${tabDisabledThemeStyle[Theme.Light]};
      outline: none;
      box-shadow: inset ${focusRing.light.default} inset;
    }
  `,
  [Theme.Dark]: css`
    &:focus-visible {
      ${tabDisabledThemeStyle[Theme.Dark]};
      outline: none;
      box-shadow: inset ${focusRing.dark.default} inset;
    }
  `,
};

export const tabNameStyle = css`
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: inherit;

  // We create a pseudo element that's the width of the bolded text
  // This way there's no layout shift on hover when the text is bolded.
  &:before {
    content: attr(data-product);
    font-weight: 700;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
  }

  &:after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: -${tabUnderlineOverflow}px;
    right: -${tabUnderlineOverflow}px;
    height: 2px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0);
    transform: scale3d(0.8, 1, 1);
    transition: ${transitionDuration.faster}ms ease-in-out;
    transition-property: background-color, transform;
  }
`;

export const blobStyle = css`
  fill: rgba(255, 255, 255, 0);
  z-index: -1; // below the focus ring
  transition: fill ${transitionDuration.faster}ms ease-in-out;
`;