import { StyleSheet } from 'react-native';
import legacyVariables from './variables';

const SELECTED_TOOLBAR_BACKGROUND_COLOR = legacyVariables.GREY_4;
const TOOLBAR_BACKGROUND_COLOR = legacyVariables.GREY_5;
const TOOLBAR_BORDER_COLOR = legacyVariables.BORDER_COLOR;
const TOOLBAR_BUTTON_SIZE = legacyVariables.LARGE_SIZE + legacyVariables.SMALL_SIZE * 2.0;
const SEPARATOR_HEIGHT = legacyVariables.MEDIUM_SIZE;
const SEPARATOR_MARGIN = legacyVariables.MEDIUM_SIZE;
const SEPARATOR_COLOR = legacyVariables.BORDER_COLOR;
const EDITOR_FONT_SIZE = legacyVariables.HEADER_4;
const EDITOR_PADDING = legacyVariables.MEDIUM_SIZE;
const EDITOR_MARGIN = legacyVariables.MEDIUM_SIZE;
const EDITOR_BORDER_COLOR = legacyVariables.BORDER_COLOR;
const ERROR_FONT_SIZE = legacyVariables.HEADER_5;
const ERROR_MARGIN_VERTICAL = legacyVariables.SMALL_SIZE;
const ERROR_COLOR = legacyVariables.DANGER_COLOR;

const fontStyles = legacyVariables.FONT_FAMILY !== undefined ? { fontFamily: legacyVariables.FONT_FAMILY } : {};

const richTextEditorStyles = {
  wrapper: {
    marginBottom: EDITOR_MARGIN,
  },
  webview: {
    minHeight: 120.0,
    backgroundColor: 'transparent',
    borderBottomWidth: 0.8,
    borderBottomColor: EDITOR_BORDER_COLOR,
  },
  editor: {
    padding: EDITOR_PADDING,
    fontSize: EDITOR_FONT_SIZE,
  },
  suggestionList: {},
  toolbar: {
    flexDirection: 'row',
    alignItems: 'center',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: TOOLBAR_BORDER_COLOR,
    backgroundColor: TOOLBAR_BACKGROUND_COLOR,
  },
  toolbarButton: {
    width: TOOLBAR_BUTTON_SIZE,
    height: TOOLBAR_BUTTON_SIZE,
    alignItems: 'center',
    justifyContent: 'center',
  },
  selectedToolbarButton: {
    width: TOOLBAR_BUTTON_SIZE,
    height: TOOLBAR_BUTTON_SIZE,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: SELECTED_TOOLBAR_BACKGROUND_COLOR,
  },
  separator: {
    width: 0.0,
    height: SEPARATOR_HEIGHT,
    marginHorizontal: SEPARATOR_MARGIN,
    borderRightWidth: 1.0,
    borderRightColor: SEPARATOR_COLOR,
  },
  errorMessage: {
    minHeight: ERROR_FONT_SIZE,
    lineHeight: ERROR_FONT_SIZE,
    marginTop: ERROR_MARGIN_VERTICAL,
    fontSize: ERROR_FONT_SIZE,
    fontWeight: '500',
    color: ERROR_COLOR,
    ...fontStyles,
  },
  errorWebview: {
    borderBottomColor: ERROR_COLOR,
  },
} as const;

export default richTextEditorStyles;