import { useAnimateProp, useAnimationWaiter } from '@coorpacademy/react-native-animation';
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Animated } from 'react-native';
import Loader from '../../../atom/loader/index.native';
import ReviewNoSkills from '../../../organism/review-no-skills/index.native';
import ReviewListSkills from '../../../organism/review-skills/index.native';
import { useTemplateContext } from '../template-context';
const createStyleSheet = theme => StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    width: '100%',
    backgroundColor: theme.colors.white
  },
  loaderContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center'
  },
  title: {
    fontSize: theme.fontSize.xlarge,
    fontWeight: theme.fontWeight.bold,
    lineHeight: 28,
    color: theme.colors.text.primary,
    marginBottom: theme.spacing.base,
    marginTop: theme.spacing.small
  }
});
const ReviewSkills = props => {
  const {
    'aria-label': ariaLabel,
    title,
    isLoading,
    listSkills,
    titleNoSkills,
    textNoSkills,
    iconSkillAriaLabel
  } = props;
  const templateContext = useTemplateContext();
  const [styleSheet, setStylesheet] = useState(null);
  const {
    theme
  } = templateContext;
  useEffect(() => {
    const _stylesheet = createStyleSheet(theme);
    setStylesheet(_stylesheet);
  }, [theme]);
  const fadeResultsIn = useAnimateProp({
    property: 'opacity',
    fromValue: 0,
    toValue: 1
  });
  useAnimationWaiter(isLoading, fadeResultsIn);
  if (!styleSheet) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: styleSheet.container,
    accessibilityLabel: ariaLabel
  }, /*#__PURE__*/React.createElement(Text, {
    style: styleSheet.title
  }, title), /*#__PURE__*/React.createElement(Animated.View, {
    style: fadeResultsIn.animatedStyle
  }, !listSkills || listSkills.length === 0 ? /*#__PURE__*/React.createElement(ReviewNoSkills, {
    titleNoSkills: titleNoSkills,
    textNoSkills: textNoSkills,
    iconSkillAriaLabel: iconSkillAriaLabel
  }) : /*#__PURE__*/React.createElement(ReviewListSkills, {
    listSkills: listSkills
  })), /*#__PURE__*/React.createElement(View, {
    style: styleSheet.loaderContainer,
    pointerEvents: "none"
  }, /*#__PURE__*/React.createElement(Loader, {
    readyToHide: !isLoading
  })));
};
export default ReviewSkills;
//# sourceMappingURL=index.native.js.map