import { createVar, globalStyle, keyframes, style, styleVariants } from '@vanilla-extract/css';
import * as htmlCss from '../../../styles/CustomHtml.css';
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
import { DefaultReset, color, config, toRem } from 'folds';

export const StickySection = style({
  position: 'sticky',
  top: config.space.S100,
});

const SpacingVar = createVar();
const SpacingVariant = styleVariants({
  '0': {
    vars: {
      [SpacingVar]: config.space.S0,
    },
  },
  '100': {
    vars: {
      [SpacingVar]: config.space.S100,
    },
  },
  '200': {
    vars: {
      [SpacingVar]: config.space.S200,
    },
  },
  '300': {
    vars: {
      [SpacingVar]: config.space.S300,
    },
  },
  '400': {
    vars: {
      [SpacingVar]: config.space.S400,
    },
  },
  '500': {
    vars: {
      [SpacingVar]: config.space.S500,
    },
  },
});

const highlightAnime = keyframes({
  '0%': {
    backgroundColor: color.Primary.Container,
  },
  '25%': {
    backgroundColor: color.Primary.ContainerActive,
  },
  '50%': {
    backgroundColor: color.Primary.Container,
  },
  '75%': {
    backgroundColor: color.Primary.ContainerActive,
  },
  '100%': {
    backgroundColor: color.Primary.Container,
  },
});

export const newMessageAnime = keyframes({
  '0%': {
    opacity: 0,
    transform: 'translateY(8px)',
  },
  '100%': {
    opacity: 1,
    transform: 'translateY(0)',
  },
});
const HighlightVariant = styleVariants({
  true: {
    animation: `${highlightAnime} 2000ms ease-in-out`,
    animationIterationCount: 'infinite',
  },
});

const SelectedVariant = styleVariants({
  true: {
    backgroundColor: color.Surface.ContainerActive,
  },
});

const NewMessageVariant = styleVariants({
  true: {
    animation: `${newMessageAnime} 300ms ease-out`,
    animationFillMode: 'backwards',
  },
});

const AutoCollapse = style({
  selectors: {
    [`&+&`]: {
      marginTop: 0,
    },
  },
});

export const MessageBase = recipe({
  base: [
    DefaultReset,
    {
      marginTop: SpacingVar,
      padding: `${config.space.S100} ${config.space.S200} ${config.space.S100} ${config.space.S400}`,
      borderRadius: `0 ${config.radii.R400} ${config.radii.R400} 0`,
      transition: 'background-color 150ms ease-out',
      selectors: {
        '&:hover': {
          backgroundColor: color.Surface.ContainerHover,
        },
      },
    },
  ],
  variants: {
    space: SpacingVariant,
    collapse: {
      true: {
        marginTop: 0,
        paddingTop: config.space.S0,
      },
    },
    autoCollapse: {
      true: AutoCollapse,
    },
    highlight: HighlightVariant,
    selected: SelectedVariant,
    newMessage: NewMessageVariant,
  },
  defaultVariants: {
    space: '400',
  },
});

export type MessageBaseVariants = RecipeVariants<typeof MessageBase>;

export const CompactHeader = style([
  DefaultReset,
  StickySection,
  {
    maxWidth: toRem(170),
    width: '100%',
  },
]);

export const AvatarBase = style({
  paddingTop: toRem(4),
  transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
  display: 'flex',
  alignSelf: 'start',

  selectors: {
    '&:hover': {
      transform: `translateY(${toRem(-2)})`,
    },
  },
});

export const ModernBefore = style({
  minWidth: toRem(36),
});

export const BubbleBefore = style({
  minWidth: toRem(36),
});

export const BubbleContent = style({
  maxWidth: toRem(800),
  padding: config.space.S200,
  backgroundColor: color.SurfaceVariant.Container,
  color: color.SurfaceVariant.OnContainer,
  borderRadius: config.radii.R500,
  position: 'relative',
});

export const BubbleContentArrowLeft = style({
  borderTopLeftRadius: 0,
});

export const BubbleLeftArrow = style({
  width: toRem(9),
  height: toRem(8),

  position: 'absolute',
  top: 0,
  left: toRem(-8),
  zIndex: 1,
});

export const Username = style({
  overflow: 'hidden',
  overflowY: 'clip',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  lineHeight: '1.5',
  // Allow text selection while keeping button clickable
  userSelect: 'text',
  WebkitUserSelect: 'text',
  selectors: {
    'button&': {
      cursor: 'pointer',
    },
    'button&:hover, button&:focus-visible': {
      textDecoration: 'underline',
    },
    // Stationery uses a colored border-bottom accent instead
    'html.stationery &, body.stationery &': {
      overflow: 'visible',
      overflowY: 'visible',
    },
    'body.stationery button&:hover, body.stationery button&:focus-visible': {
      textDecoration: 'none',
    },
  },
});

export const UsernameBold = style({
  fontWeight: 550,
});

const jumboEmojiSize = toRem(70);

export const MessageTextBody = recipe({
  base: {
    wordBreak: 'break-word',
    overflow: 'clip',
    overflowY: 'clip',
    lineHeight: '1.5',
    userSelect: 'text',
    WebkitUserSelect: 'text',
  },
  variants: {
    preWrap: {
      true: {
        whiteSpace: 'pre-wrap',
      },
    },
    jumboEmoji: {
      true: {
        fontSize: jumboEmojiSize,
        lineHeight: 1,
        overflow: 'visible',
        overflowY: 'visible',
        paddingBottom: config.space.S200,
        cursor: 'pointer',
        position: 'relative',
        zIndex: 5,
      },
    },
    emote: {
      true: {
        color: color.Success.Main,
        fontStyle: 'italic',
      },
    },
  },
});

export type MessageTextBodyVariants = RecipeVariants<typeof MessageTextBody>;

const jumboEmojiClass = MessageTextBody.classNames.variants.jumboEmoji.true;

globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonBase}`, {
  height: '1em',
  padding: 0,
  overflow: 'visible',
  verticalAlign: 'middle',
  position: 'relative',
  zIndex: 1,
});

globalStyle(`${jumboEmojiClass} .${htmlCss.Emoticon.classNames.base}`, {
  fontSize: '1em',
  height: '1em',
  minWidth: '1em',
  lineHeight: 1,
  position: 'static',
  top: 0,
  overflow: 'visible',
});

globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonImg}`, {
  height: '1em',
  width: '1em',
  maxHeight: 'none',
  objectFit: 'contain',
});
