import { Text, View } from '@/components/shared/Themed';
import styled from '@emotion/native';

import { HorizontalSpacer } from './Spacers';

type FinishContentProps = {
  reps: number;
  setReps: (reps: number) => void;
};

export default function NumberSelector({
  setReps,
  reps
}: FinishContentProps) {
  const addReps: () => void = () => {
    setReps(reps + 1);
  }

  const removeReps: () => void = () => {
    if (reps === 0) return;

    setReps(reps - 1);
  }

  return (
    <Row>
      <CustomText onPress={removeReps}>-</CustomText>
      <HorizontalSpacer widthUnits={5} />
      <CustomText>{reps}</CustomText>
      <HorizontalSpacer widthUnits={5} />
      <CustomText onPress={addReps}>+</CustomText>
    </Row>
  );
}

const Row = styled(View)(() => ({
  flexDirection: 'row',
  backgroundColor: 'black'
}));

const CustomText = styled(Text)(({ theme }) => ({
  fontSize: 20,
  fontWeight: 'bold',
  textAlign: 'center',
  color: theme.colors.fixed.white
}))