import {StyleSheet} from 'react-native';
import {COLORS} from '@shared/colors';
import {BORDER_RADIUS, SPACING} from '@shared/theme';

const PADDING_CONTAINER = SPACING['x2.5'];
const FILTER_ICON_CONTAINER = 40;
const LOGO_SIZE = 45;
const LOGO_MARGIN_RIGHT = SPACING['x2.5'];
const SIGN_BUTTON_CONTAINER_WIDTH = 80;
export const EXTRA_HEIGHT = 110;

export const getContainerTextWidthDifference = (isPending: boolean) =>
  (isPending ? SIGN_BUTTON_CONTAINER_WIDTH : 0) +
  PADDING_CONTAINER * 2 +
  LOGO_SIZE +
  LOGO_MARGIN_RIGHT;

export const styles = StyleSheet.create({
  folderAndName: {alignItems: 'center', flexDirection: 'row'},
  logoContainer: {
    flexDirection: 'row',
    height: LOGO_SIZE,
    justifyContent: 'center',
    marginRight: LOGO_MARGIN_RIGHT,
    width: LOGO_SIZE,
  },
  text: {marginRight: SPACING.x2},
  grayText: {color: COLORS.DARK_GRAY, fontSize: 14},
  bottomTextContainer: {
    alignItems: 'center',
    flexDirection: 'row',
    marginTop: SPACING['x0.5'],
  },
  filterIconContainer: {
    alignItems: 'center',
    backgroundColor: COLORS.GREEN_THIRTEEN,
    borderRadius: FILTER_ICON_CONTAINER / 2,
    height: FILTER_ICON_CONTAINER,
    justifyContent: 'center',
    right: SPACING.x2,
    width: FILTER_ICON_CONTAINER,
  },
  signButtonContainer: {
    alignItems: 'center',
    borderRadius: BORDER_RADIUS.l,
    justifyContent: 'center',
    paddingHorizontal: SPACING.x2,
    paddingVertical: SPACING['x1.5'],
  },
  itemContainer: {
    alignItems: 'center',
    backgroundColor: COLORS.WHITE,
    flex: 1,
    flexDirection: 'row',
    height: 85,
    justifyContent: 'space-between',
    paddingHorizontal: SPACING.x2,
    paddingVertical: PADDING_CONTAINER,
  },
  signatureLogo: {marginRight: SPACING['x0.5']},
  folderIcon: {marginRight: SPACING.x1},
});
