import heroVariables from '../global';

const WRAPPER_BORDER_COLOR = heroVariables.PRIMARY_COLOR;
const TITLE_COLOR = heroVariables.PRIMARY_COLOR;

/* This will fit the ListItem */
const WRAPPER_MEDIUM_SIZE = heroVariables.LARGE_SIZE * 2.0;
const WRAPPER_MEDIUM_RADIUS = WRAPPER_MEDIUM_SIZE / 2.0;
const TITLE_MEDIUM_FONT_SIZE = heroVariables.HEADER_2;
const TITLE_MEDIUM_FONT_WEIGHT = '300';

const WRAPPER_LARGE_SIZE = heroVariables.LARGE_SIZE * 4.0;
const WRAPPER_LARGE_RADIUS = WRAPPER_LARGE_SIZE / 2.0;
const TITLE_LARGE_FONT_SIZE = heroVariables.HEADER_2 * 2.0;
const TITLE_LARGE_FONT_WEIGHT = '200';

const WRAPPER_SMALL_SIZE = heroVariables.LARGE_SIZE * 1.0;
const WRAPPER_SMALL_RADIUS = WRAPPER_SMALL_SIZE / 2.0;
const TITLE_SMALL_FONT_SIZE = heroVariables.HEADER_2 / 2.0;
const TITLE_SMALL_FONT_WEIGHT = '400';

const titleStyles =
  heroVariables.FONT_FAMILY !== undefined
    ? { fontFamily: heroVariables.FONT_FAMILY, color: TITLE_COLOR }
    : { color: TITLE_COLOR };

const avatarStyles = {
  wrapper: {},
  titleWrapper: {
    position: 'absolute',
    top: 0.0,
    left: 0.0,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: WRAPPER_BORDER_COLOR,
  },
  title: titleStyles,
  image: {
    position: 'absolute',
    left: 0.0,
    top: 0.0,
  },
  mediumWrapper: {
    height: WRAPPER_MEDIUM_SIZE,
    width: WRAPPER_MEDIUM_SIZE,
  },
  mediumTitleWrapper: {
    width: WRAPPER_MEDIUM_SIZE,
    height: WRAPPER_MEDIUM_SIZE,
    borderWidth: 1.2,
    borderRadius: WRAPPER_MEDIUM_RADIUS,
  },
  mediumTitle: {
    fontSize: TITLE_MEDIUM_FONT_SIZE,
    fontWeight: TITLE_MEDIUM_FONT_WEIGHT,
  },
  mediumImage: {
    width: WRAPPER_MEDIUM_SIZE,
    height: WRAPPER_MEDIUM_SIZE,
    borderRadius: WRAPPER_MEDIUM_RADIUS,
  },
  largeWrapper: {
    width: WRAPPER_LARGE_SIZE,
    height: WRAPPER_LARGE_SIZE,
  },
  largeTitleWrapper: {
    width: WRAPPER_LARGE_SIZE,
    height: WRAPPER_LARGE_SIZE,
    borderWidth: 1.5,
    borderRadius: WRAPPER_LARGE_RADIUS,
  },
  largeTitle: {
    fontSize: TITLE_LARGE_FONT_SIZE,
    fontWeight: TITLE_LARGE_FONT_WEIGHT,
  },
  largeImage: {
    width: WRAPPER_LARGE_SIZE,
    height: WRAPPER_LARGE_SIZE,
    borderRadius: WRAPPER_LARGE_RADIUS,
  },
  smallWrapper: {
    width: WRAPPER_SMALL_SIZE,
    height: WRAPPER_SMALL_SIZE,
  },
  smallTitleWrapper: {
    width: WRAPPER_SMALL_SIZE,
    height: WRAPPER_SMALL_SIZE,
    borderWidth: 1.0,
    borderRadius: WRAPPER_SMALL_RADIUS,
  },
  smallTitle: {
    fontSize: TITLE_SMALL_FONT_SIZE,
    fontWeight: TITLE_SMALL_FONT_WEIGHT,
  },
  smallImage: {
    width: WRAPPER_SMALL_SIZE,
    height: WRAPPER_SMALL_SIZE,
    borderRadius: WRAPPER_SMALL_RADIUS,
  },
} as const;

export default avatarStyles;