//@ts-nocheck
import React, { useEffect, useState } from 'react';
import { SafeAreaView, TouchableOpacity, View } from 'react-native';
import Modal from 'react-native-modal';
import { CallRed, GuideLineIcon, LineIcon } from '../../assets/icons';
import { MText } from '../../components/MText';

interface Props {
  isOpen: boolean;
  onClose: () => void;
}
export default function ModalGuideline({ isOpen, onClose }: Props) {
  const [expire_time, setExpireTime] = useState(0);

  useEffect(() => {
    setExpireTime(5);
  }, [isOpen]);

  useEffect(() => {
    let interval = setInterval(() => {
      if (expire_time > 0) {
        setExpireTime(expire_time - 1);
      } else {
        clearInterval(interval);
      }
    }, 1000);
    return () => clearInterval(interval);
  }, [expire_time]);
  return (
    <Modal
      isVisible={isOpen}
      backdropOpacity={0.5}
      useNativeDriver={true}
      animationOutTiming={500}
      useNativeDriverForBackdrop={true}
      hideModalContentWhileAnimating={true}
    >
      <SafeAreaView style={{ flex: 1 }}>
        <View
          style={{
            // width: 40,
            height: 40,
            backgroundColor: 'white',
            justifyContent: 'center',
            alignItems: 'center',
            alignSelf: 'flex-end',
            borderTopLeftRadius: 6,
            borderBottomLeftRadius: 6,
            top: -16,
            right: -16,
            flexDirection: 'row',
          }}
        >
          <View style={{ paddingHorizontal: 8 }}>
            <GuideLineIcon />
          </View>
          <View
            style={{ width: 1, backgroundColor: '#828282', height: '60%' }}
          />
          <View style={{ paddingHorizontal: 8 }}>
            <CallRed />
          </View>
        </View>
        <View
          style={{
            alignSelf: 'flex-end',
            top: -32,
            right: 26,
          }}
        >
          <LineIcon />
        </View>
        <View
          style={{
            alignSelf: 'flex-end',
            backgroundColor: 'white',
            padding: 8,
            borderRadius: 6,
            top: -32,
          }}
        >
          <MText
            style={{
              fontWeight: 'bold',
              color: '#E40010',
            }}
          >
            Hướng dẫn{' '}
            <MText
              style={{
                fontWeight: 'bold',
                color: '#333333',
              }}
            >
              form "Mục đích sử dụng"
            </MText>
          </MText>
          <MText
            style={{
              color: '#828282',
              fontSize: 12,
            }}
          >
            Giải thích tóm tắt chi tiết các bước bạn cần làm{'\n'}để hoàn thiện
            hồ sơ “Mục đích sử dụng”
          </MText>
          <TouchableOpacity
            disabled={expire_time > 0}
            onPress={onClose}
            style={{
              alignSelf: 'flex-end',
              marginTop: 12,
            }}
          >
            {expire_time > 0 ? (
              <MText
                style={{
                  fontWeight: 'bold',
                  color: '#BDBDBD',
                  fontSize: 16,
                }}
              >
                Đã hiểu ({expire_time}s)
              </MText>
            ) : (
              <MText
                style={{
                  fontWeight: 'bold',
                  color: '#E40010',
                  fontSize: 16,
                }}
              >
                Đã hiểu
              </MText>
            )}
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    </Modal>
  );
}
