import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {IconPlus} from '@tabler/icons-react-native';
import {Button} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {CreateGoalParams} from '@modules/goals/interfaces';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export function ButtonCreateGoalFooter({goalOwner, cycleId}: CreateGoalParams) {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const paddingBottom = useSafeAreaBottomPadding();
  const {theme} = useTheme();

  const onCreateGoal = () =>
    navigation.navigate(Screens.CREATE_GOAL, {goalOwner, cycleId});

  return (
    <View
      style={[
        styles.createButton,
        {
          paddingBottom,
          backgroundColor: theme.background.layout.tertiary,
          shadowColor: theme.shadow.inverted,
        },
      ]}>
      <Button
        text={t('goals.list.create')}
        onPress={onCreateGoal}
        IconLeft={IconPlus}
      />
    </View>
  );
}