import * as React from 'react';
import { Animated } from 'react-native';
import { IconButton } from 'react-native-paper';
import { Flex, ActivityIndicator } from '@ant-design/react-native';
import { useAnimation } from 'react-native-animation-hooks';

import Text from './Text';

export default function PlusCom(props) {
  const { num, minus, plusEvent, loading } = props;
  const minusOpacity = useAnimation({
    type: 'timing',
    initialValue: 0,
    duration: 100,
    toValue: num ? 1 : 0,
  });
  return (
    <>
      <Flex
        style={{
          position: 'absolute',
          right: 0,
          bottom: 0,
          zIndex: 2,
          // transform: [{ translateY: 10 }],
        }}
      >
        <Animated.View
          style={{
            opacity: minusOpacity,
          }}
        >
          <Flex>
            <IconButton
              icon="minus-circle-outline"
              color="#FFB11E"
              size={20}
              disabled={!num}
              onPress={minus}
            />

            {loading ? (
              <ActivityIndicator />
            ) : (
              <Text size="c2">{num || 0}</Text>
            )}
          </Flex>
        </Animated.View>
        <IconButton
          icon="plus-circle"
          color="#FFB11E"
          size={20}
          onPress={plusEvent}
        />
      </Flex>
    </>
  );
}