import { View } from "react-native";
import SkeletonPlaceholder from "react-native-skeleton-placeholder";
import Colors from "../../../../../../assets/colors/colors";
import styles from "./QuoteOfferShimmerScreenStyle";
import { StaticHeader } from "../../../../../../components/reusable/static-header/StaticHeader";
import { CtaData } from "../../../../../common/interface";
import { ConstantCta } from "../../../../../common/constants/CtaConstants";

const QuoteOfferShimmerScreen = ({
  handleClick,
}: {
  handleClick?: (ctaData: CtaData) => void;
}) => {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <StaticHeader
          handleClick={handleClick}
          leftIconCta={ConstantCta.STATIC_HEADER_LEFT_ICON_CTA}
          rightIconCta={ConstantCta.STATIC_HEADER_RIGHT_ICON_CTA}
        />
      </View>
      <ContentShimmer />
      <FooterShimmer />
    </View>
  );
};

export default QuoteOfferShimmerScreen;

const HeaderShimmer = () => {
  return (
    <View style={styles.header}>
      <SkeletonPlaceholder
        backgroundColor={Colors.shimmerBgColor}
        highlightColor={Colors.shimmerHighlightColor}
        direction="right"
        enabled={true}
        angle={100}
        borderRadius={4}
      >
        <View>
          <View style={styles.shimmerHeaderLayout} />
        </View>
      </SkeletonPlaceholder>
    </View>
  );
};

const ContentShimmer = () => {
  return (
    <View style={styles.content}>
      <SkeletonPlaceholder
        backgroundColor={Colors.shimmerBgColor}
        highlightColor={Colors.shimmerHighlightColor}
        direction="right"
        angle={100}
        borderRadius={4}
      >
        <View>
          <View style={styles.shimmerLayout1} />
          <View style={styles.shimmerLayout2} />
          <View style={styles.shimmerLayout3} />
          <View style={styles.shimmerLayout4} />
        </View>
      </SkeletonPlaceholder>
    </View>
  );
};

const FooterShimmer = () => {
  return (
    <View style={styles.footer}>
      <SkeletonPlaceholder
        backgroundColor={Colors.shimmerBgColor}
        highlightColor={Colors.shimmerHighlightColor}
        direction="right"
        angle={100}
        borderRadius={4}
      >
        <View>
          <View style={styles.shimmerFooterLayout} />
        </View>
      </SkeletonPlaceholder>
    </View>
  );
};