import React, { useState } from 'react';
import { View, StyleSheet, Modal, KeyboardAvoidingView, Platform } from 'react-native';
import Button from '@/components/Button';
import AppText from '../AppText';
import i18n from '@/i18n/config';
import RemarquePopup from './RemarquePopUp';

type Props = {
  isVisible: boolean;
  onClose: () => void;
  onSaveAndExit: () => Promise<void>;
};

const EndAssessPopup: React.FC<Props> = ({ isVisible, onClose, onSaveAndExit }) => {
  const [rPopUpVisible, setRPopUpVisible] = useState(false);
  const [saving, setSaving] = useState(false);

  const handleNo = async () => {
    setSaving(true);
    await onSaveAndExit();
    setSaving(false);
  };

  return (
    <Modal visible={isVisible} transparent>
      <KeyboardAvoidingView
        style={styles.container}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        <View style={styles.popV2}>
          <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <AppText text={i18n.t('remarques.question')} />

            <View style={{ flexDirection: 'row', marginTop: 20 }}>
              <Button
                isSelected
                text={i18n.t('commons.yes')}
                onPress={() => setRPopUpVisible(true)}
              />
              <Button
                isSelected
                text={i18n.t('commons.no')}
                style={{ marginLeft: 10 }}
                onPress={handleNo}
                disabled={saving}
              />
            </View>
          </View>
        </View>
      </KeyboardAvoidingView>

      <RemarquePopup
        visible={rPopUpVisible}
        onClose={() => setRPopUpVisible(false)}
        sectionKey="remarques"
        sectionLabel="remarque"
        onSubmit={async () => {
          setRPopUpVisible(false);
          await handleNo();
        }}
      />
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  popV2: {
    backgroundColor: 'white',
    height: '90%',
    width: '90%',
    borderRadius: 10,
    justifyContent: 'center',
    padding: 20,
  },
});

export default EndAssessPopup;