import {StyleSheet} from 'react-native';
import {SPACING} from '@shared/theme';
import {windowDimensions} from '@shared/constants';

import {CONTENT_HEIGHT} from '../HeaderBox/styles';

const HEADER_SIDE_WIDTH = 80;
const HEADER_SIDE_WITH_SPACING = HEADER_SIDE_WIDTH + SPACING.x2;
const TITLE_MAX_WIDTH = windowDimensions.width - HEADER_SIDE_WITH_SPACING * 2;

export const styles = StyleSheet.create({
  sideContainer: {
    flexDirection: 'row',
    height: CONTENT_HEIGHT,
    width: HEADER_SIDE_WIDTH,
  },
  titleContainer: {
    alignItems: 'center',
    height: CONTENT_HEIGHT,
    justifyContent: 'center',
    width: TITLE_MAX_WIDTH,
  },
  rightContainer: {justifyContent: 'flex-end'},
});

export const getTitleContainerStyle = (contentWidth: number) => {
  const titleWidth = contentWidth - HEADER_SIDE_WITH_SPACING * 2;

  return {
    ...styles.titleContainer,
    width: titleWidth > 0 ? titleWidth : TITLE_MAX_WIDTH,
  };
};
