import { fontSizes, fontWeights, lineHeights } from '../global/typography';
import { sizes } from '../global/sizes';
import { radii } from '../global/borders';
import { space } from '../global/space';
import { systemPalette } from '../global/colors';

interface CommentColors {
  author: string;
  authorDetails: string;
  content: string;
  highlight: string;
  time: string;
}

interface CommentSizes {
  avatarSize: string;
}

interface CommentSpace {
  avatarMarginLeft: string;
  avatarMarginRight: string;
  contentMarginTop: string;
  editorActionsPadding: string;
  marginBottom: string;
  nestedMargin: string;
  padding: string;
  reactionMarginTop: string;
  timeSeparatorPadding: string;
}

interface CommentFontSizes {
  author: string;
  authorDetails: string;
  content: string;
  time: string;
}

interface CommentFontWeights {
  author: number;
  authorDetails: number;
  content: number;
  time: number;
}

interface CommentLineHeights {
  author: string;
  authorDetails: string;
  content: string;
  time: string;
}

interface CommentRadii {
  container: string;
}

const commentColors: CommentColors = {
  author: systemPalette.text,
  authorDetails: systemPalette.disabledText,
  time: systemPalette.disabledText,
  highlight: systemPalette.defaultBackground,
  content: systemPalette.bodyText,
};

const commentSizes: CommentSizes = {
  avatarSize: `${sizes.xlarge}px`,
};

const commentSpace: CommentSpace = {
  marginBottom: `${space.medium}px`,
  nestedMargin: `${space.medium}px 0 0 ${space.xlarge}px`,
  avatarMarginRight: `${space.medium}px`,
  avatarMarginLeft: `${space.small}px`,
  padding: `${space.small}px`,
  timeSeparatorPadding: `0 ${space.small}px`,
  contentMarginTop: `${space.xsmall}px`,
  reactionMarginTop: `${space.xsmall}px`,
  editorActionsPadding: `${space.small}px`,
};

const commentFontSizes: CommentFontSizes = {
  author: `${fontSizes.medium}px`,
  authorDetails: `${fontSizes.small}px`,
  content: `${fontSizes.medium}px`,
  time: `${fontSizes.small}px`,
};

const commentFontWeights: CommentFontWeights = {
  author: fontWeights.semiBold,
  authorDetails: fontWeights.semiBold,
  time: fontWeights.regular,
  content: fontWeights.regular,
};

const commentLineHeights: CommentLineHeights = {
  author: `${lineHeights.medium}px`,
  authorDetails: `${lineHeights.small}px`,
  content: `${lineHeights.medium}px`,
  time: `${lineHeights.small}px`,
};

const commentRadii: CommentRadii = {
  container: `${radii.base}px`,
};

export {
  commentColors,
  commentSizes,
  commentSpace,
  commentFontSizes,
  commentFontWeights,
  commentLineHeights,
  commentRadii,
};