import { FlexProps, Text, Flex, Box, Divider } from '@chakra-ui/react'
import MacrosFormFields from './MacrosFormFields'
import VitaminsAndMineralsFormFields from './VitaminsAndMineralsFormFields'

type Props = {
  canEdit: boolean
  showsEnergyPrecentFromFat?: boolean
} & FlexProps

function StatsFormFields({
  canEdit,
  showsEnergyPrecentFromFat = false,
}: Props) {
  return (
    <Box>
      {!canEdit && (
        <>
          <Divider size="md" />
          <Flex justifyContent="flex-end" py={2}>
            <Text fontSize="sm" fontWeight="medium">
              % Daily Value *
            </Text>
          </Flex>
        </>
      )}

      <MacrosFormFields
        canEdit={canEdit}
        showsEnergyPercentFromFats={showsEnergyPrecentFromFat}
      />

      <VitaminsAndMineralsFormFields canEdit={canEdit} mt={2} />

      {!canEdit && (
        <Box>
          <Divider my={2} borderColor="gray.400" />
          <Text fontSize="sm">
            * The % Daily Value (DV) tells you how much a nutrient in a serving
            of food contributes to a daily diet. 2000 calories a day is used for
            general nutrition advise.{' '}
          </Text>
        </Box>
      )}
    </Box>
  )
}

export { default as StatFormField } from './StatFormField'

export default StatsFormFields