import React, {useState} from 'react';
import {ScrollView, View} from 'react-native';
import {useRoute, useNavigation} from '@react-navigation/native';
import reactStringReplace from 'react-string-replace';

import {data, SCROLL_TO_POLICY} from '@screens/terms-and-condition/data';
import Container from '@components/Container';
import Button from '@components/Button';
import useTncContext from '@contexts/tnc';
import {
  Title,
  Description,
  IconWrapper,
  Icon,
  PrivacyPolicyLink,
} from '@styles/screens/terms-and-condition';

const TermsAndCondition = () => {
  const {value: tncValue, setValue} = useTncContext();
  const [acceptDisable, setAcceptDisable] = useState(true);
  const [dataSourceCords, setDataSourceCords] = useState([]);
  const [scrollViewRef, setScrollViewRef] = useState(null);
  const [count, setCount] = useState(0);
  const [isPrivacyClicked, setIsPrivacyClicked] = useState<Boolean>(false);

  const navigation = useNavigation();
  const route = useRoute();
  const params: any = route?.params;

  const isCloseToBottom = ({
    layoutMeasurement,
    contentOffset,
    contentSize,
  }: any) => {
    const paddingToBottom = 20;
    return (
      layoutMeasurement.height + contentOffset.y >=
      contentSize.height - paddingToBottom
    );
  };

  const scrollHandler = () => {
    if (count === 0 && !isPrivacyClicked) {
      scrollViewRef?.scrollTo({
        x: 0,
        y: dataSourceCords[1],
        animated: true,
      });
      setCount(count + 1);
    } else {
      scrollViewRef?.scrollToEnd({animated: true});
    }
    setIsPrivacyClicked(false);
  };

  const scrollToPrivacyPolicy = () => {
    setIsPrivacyClicked(true);
    scrollViewRef?.scrollTo({
      x: 0,
      y: dataSourceCords[1],
      animated: true,
    });
  };

  return (
    <Container header={{title: 'Terms and conditions & privacy policy'}}>
      <ScrollView
        ref={ref => {
          setScrollViewRef(ref);
        }}
        onScroll={({nativeEvent}) => {
          if (isCloseToBottom(nativeEvent)) {
            setAcceptDisable(false);
          } else {
            setAcceptDisable(true);
          }
        }}
        testID="tncTxt">
        {data.map((item: any, index: number) => {
          const content = item?.content;
          return (
            <View
              key={index}
              onLayout={event => {
                const layout = event.nativeEvent.layout;
                dataSourceCords[index] = layout.y;
                setDataSourceCords(dataSourceCords);
              }}>
              <Title>{item.title}</Title>
              <Description>
                {reactStringReplace(content, SCROLL_TO_POLICY, (match, i) => (
                  <PrivacyPolicyLink
                    key={i}
                    onPress={() => scrollToPrivacyPolicy()}>
                    privacy policy
                  </PrivacyPolicyLink>
                ))}
              </Description>
            </View>
          );
        })}
      </ScrollView>
      {acceptDisable && (
        <IconWrapper
          onPress={() => scrollHandler()}
          showButton={params?.showConsentCheckbox}
          testID="scrlDnBtn">
          <Icon />
        </IconWrapper>
      )}
      {params?.showConsentCheckbox && (
        <Button
          disabled={acceptDisable}
          title="Agree"
          data-autoid="tncCB"
          onPress={() => {
            setValue({...tncValue, agree: true});
            if (navigation.canGoBack()) {
              navigation.goBack();
            }
          }}
          testID="tncAgreeBtn"
        />
      )}
    </Container>
  );
};

export default TermsAndCondition;