import styled from '@emotion/native';
import { StyleSheet, TouchableOpacity, View } from 'react-native';

export const StyledToolbarButton = styled(TouchableOpacity)<{
  selected: boolean;
}>(({ theme, selected }) => ({
  width: theme.__hd__.richTextEditor.sizes.toolbarButtonSize,
  height: theme.__hd__.richTextEditor.sizes.toolbarButtonSize,
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: selected
    ? theme.__hd__.richTextEditor.colors.toolbarButtonSelectedBackground
    : undefined,
}));

export const StyledToolbar = styled(View)(({ theme }) => ({
  flexDirection: 'row',
  alignItems: 'center',
  borderTopWidth: StyleSheet.hairlineWidth,
  borderTopColor: theme.__hd__.richTextEditor.colors.toolbarBorderColor,
  backgroundColor: theme.__hd__.richTextEditor.colors.toolbarBackgroundColor,
  paddingHorizontal: theme.__hd__.richTextEditor.space.toolbarHorizontalPadding,
}));

export const StyledSeparator = styled(View)(({ theme }) => ({
  width: theme.__hd__.richTextEditor.sizes.toolbarSeparatorWidth,
  height: theme.__hd__.richTextEditor.sizes.toolbarSeparatorHeight,
  flexDirection: 'row',
  alignItems: 'center',
  marginHorizontal: theme.space.small,
  backgroundColor: theme.colors.secondaryOutline,
}));