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

const StyledContainer = styled(View)(({ theme }) => ({
  backgroundColor: theme.__hd__.calendar.colors.background,
}));

const StyledCalendarHeader = styled(View)(({ theme }) => ({
  flexDirection: 'row',
  paddingHorizontal: theme.__hd__.calendar.space.headerHorizontalPadding,
  paddingVertical: theme.__hd__.calendar.space.headerVerticalPadding,
}));

const StyledCalendarDayNameCell = styled(View)<
  ViewProps & {
    themeItemWidth?: number;
  }
>(({ theme, themeItemWidth }) => ({
  width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
  height: theme.__hd__.calendar.sizes.cellHeight,
  alignItems: 'center',
  justifyContent: 'center',
}));

const StyledCalendarCell = styled(TouchableOpacity)<{
  variant?: 'default' | 'current' | 'selected' | 'highlighted';
  themeItemWidth?: number;
}>(({ theme, variant = 'default' }) => ({
  borderColor: theme.__hd__.calendar.colors.border,
  borderWidth: variant === 'current' ? 1 : 0,
  borderRadius:
    variant === 'highlighted' ? undefined : theme.__hd__.calendar.radii.default,
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor:
    variant === 'selected'
      ? theme.__hd__.calendar.colors.rowItem.selected
      : 'transparent',
  width: '100%',
  height: '100%',
  maxWidth: theme.__hd__.calendar.sizes.cellWidth,
  maxHeight: theme.__hd__.calendar.sizes.cellHeight,
}));

const StyledCalendarRow = styled(View)<ViewProps>(({ theme }) => ({
  flexDirection: 'row',
  paddingHorizontal: theme.__hd__.calendar.space.rowVerticalPadding,
  flexWrap: 'wrap',
  justifyContent: 'center',
  alignItems: 'center',
}));

const StyledCalendarRowItem = styled(View)<
  ViewProps & {
    themeItemWidth?: number;
    isHighlighted?: boolean;
  }
>(({ theme, themeItemWidth, isHighlighted }) => ({
  flexBasis: `${Math.floor(100.0 / 7.0)}%`,
  lineHeight: 0,
  alignItems: 'center',
  width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
  height: themeItemWidth || theme.__hd__.calendar.sizes.cellHeight,
  maxHeight: theme.__hd__.calendar.sizes.cellHeight,
  justifyContent: 'center',
  backgroundColor: isHighlighted
    ? theme.__hd__.calendar.colors.rowItem.highlighted
    : undefined,
}));

const StyledDisabledCalendarRowItem = styled(View)<
  ViewProps & {
    themeItemWidth?: number;
  }
>(({ theme, themeItemWidth }) => ({
  flexBasis: `${Math.floor(100.0 / 7.0)}%`,
  alignItems: 'center',
  width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
  height: themeItemWidth || theme.__hd__.calendar.sizes.cellHeight,
  maxHeight: theme.__hd__.calendar.sizes.cellHeight,
}));

const StyledMark = styled(View)<{ variant: 'primary' | 'inverted' }>(
  ({ theme, variant = 'primary' }) => ({
    width: theme.__hd__.calendar.sizes.markWidth,
    height: theme.__hd__.calendar.sizes.markHeight,
    borderRadius: theme.__hd__.calendar.radii.default,
    backgroundColor: theme.__hd__.calendar.colors[variant],
    position: 'absolute',
    bottom: '10%',
  })
);

export {
  StyledContainer,
  StyledCalendarHeader,
  StyledCalendarRow,
  StyledCalendarRowItem,
  StyledDisabledCalendarRowItem,
  StyledCalendarDayNameCell,
  StyledCalendarCell,
  StyledMark,
};