import styled from '@emotion/native';
import { TouchableOpacity } from 'react-native';
import Box from '../Box';
import Typography from '../Typography';

const StyledSegmentedControlWrapper = styled(Box)<{
  themeSize: 'medium' | 'large';
}>(({ themeSize, theme }) => ({
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  height: theme.__hd__.segmentedControl.sizes.wrapperHeight[themeSize],
  borderRadius: theme.__hd__.segmentedControl.radii.wrapper[themeSize],
  backgroundColor: theme.__hd__.segmentedControl.colors.wrapperBackground,
  alignSelf: 'flex-start',
  paddingHorizontal:
    theme.__hd__.segmentedControl.space.wrapperHorizontalPadding,
}));

const StyledSegmentedItem = styled(TouchableOpacity)<{
  themeSize: 'medium' | 'large';
  themeSelected: boolean;
}>(({ themeSize, theme, themeSelected }) => ({
  flexGrow: 1,
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  height: theme.__hd__.segmentedControl.sizes.itemHeight[themeSize],
  borderRadius: theme.__hd__.segmentedControl.radii.item[themeSize],
  backgroundColor: themeSelected
    ? theme.__hd__.segmentedControl.colors.itemBackground.active
    : theme.__hd__.segmentedControl.colors.itemBackground.inactive,
  ...theme.__hd__.segmentedControl.shadows.item[
    themeSelected ? 'active' : 'inactive'
  ],
}));

const StyledSegmentedItemWrapper = styled(Box)(({ theme }) => ({
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  gap: theme.__hd__.segmentedControl.space.itemAffixGap,
}));

const StyledSegmentedItemLabelWrapper = styled(Box)(({ theme }) => ({
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  gap: theme.__hd__.segmentedControl.space.itemLabelGap,
}));

const StyledSegmentedItemText = styled(Typography.Body)(({ theme }) => ({
  lineHeight: theme.__hd__.segmentedControl.lineHeights.itemText,
}));

export {
  StyledSegmentedControlWrapper,
  StyledSegmentedItem,
  StyledSegmentedItemLabelWrapper,
  StyledSegmentedItemText,
  StyledSegmentedItemWrapper,
};