import React, { useState } from 'react';
import {
  Box,
  Typography,
  AccordionDetails,
  AccordionSummary,
  Accordion,
  Grid,
} from '@mui/material';
import { useStyles } from './thankYouStyles';
import thankYouImg from '../../assets/images/card/thankYou.png';
import { LoadingButton } from '@mui/lab';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { ArrowBackOutlined } from '@mui/icons-material';
import CustomModal from '../Modal/Modal';

const ThankYou = ({ canClose = true, setShowPopup }) => {
  const classes = useStyles();
  const [showFaqSection, setShowFqaSection] = useState(false);
  const [showModal, setShowModal] = useState(true);

  const handleCloseModal = () => {
    if (canClose === false) {
      // Don't close the modal if onClose prop is false
      return;
    }
    // Close the modal
    setShowModal(false);
    setShowPopup(false);
  };

  const faqData = [
    {
      question: 'How do I post a job on the recruitment portal?',
      answer:
        'To post a job, log in to your account, navigate to the dashboard, and click on the "Post a Job" button. Follow the prompts to input job details, requirements, and preferences.',
    },
    {
      question: 'Can I customise the recruitment process for each job posting?',
      answer:
        'Yes, our platform allows you to set a tailored recruitment process for each job. Define specific stages to streamline your hiring workflow.',
    },
    {
      question: 'How can I screen candidates effectively using the portal?',
      answer:
        'Utilise our advanced screening and search tools to filter candidates based on key criteria such as skills, and education. Easily review and compare candidate profiles within the platform.',
    },
    {
      question:
        'Is it possible to search for a specific candidate in the database?',
      answer:
        "Yes, the portal features a powerful search functionality. Simply enter the candidate's name or relevant keywords to quickly locate and review their profile.",
    },
    {
      question:
        'Can I collaborate with other team members during the hiring process?',
      answer:
        'Absolutely. Our platform supports collaboration among team members. You can share',
    },
    {
      question:
        'How do I save or reject individual candidate profiles for future reference?',
      answer:
        'Easily manage candidate profiles by using the intuitive interface. You can shortlist promising candidates, and save profiles in a specific folder for future reference, or reject applicants with just a few clicks.',
    },
    {
      question: 'Can I download resumes and view them on my mobile device?',
      answer:
        'Yes, our platform offers the convenience of downloading resumes directly to your mobile device. This allows you to review candidate information anytime, anywhere, and share it effortlessly.',
    },
    {
      question:
        'What security measures are in place to protect sensitive candidate information?',
      answer:
        'Our platform prioritises data security. We employ encryption protocols and follow industry best practices to ensure the confidentiality and integrity of candidate information.',
    },
    {
      question: 'Is there a support team available for assistance if needed?',
      answer:
        'Absolutely. Our dedicated support team is available to assist you with any queries or concerns. Feel free to reach out through —-----------@bsmail.in',
    },
  ];
  return (
    <>
      {showModal && (
        <CustomModal
          onClose={handleCloseModal}
          showCloseButton={false}
          modalBodyFunction={() => (
            <Box>
              {showFaqSection ? (
                <Box className={classes.faqMainDiv}>
                  <Grid container className={classes.faqHeaderDiv}>
                    <Grid item xs={1} className={classes.goBackDiv}>
                      <ArrowBackOutlined
                        className={classes.goBackicon}
                        onClick={() => setShowFqaSection(false)}
                      />
                    </Grid>
                    <Grid item xs={11}>
                      <Typography variant="h4" className={classes.faqTitle}>
                        Frequently Asked Questions
                      </Typography>
                    </Grid>
                  </Grid>
                  {/* {faqData.map((faq, index) => (
                    <Accordion key={index}>
                      <AccordionSummary
                        expandIcon={<ExpandMoreIcon />}
                        aria-controls={`panel${index + 1}-content`}
                        id={`panel${index + 1}-header`}
                      >
                        <Typography variant="h6" className={classes.question}>
                          Q{index + 1}. {faq.question}
                        </Typography>
                      </AccordionSummary>
                      <AccordionDetails>
                        <Typography className={classes.answer}>
                          {faq.answer}
                        </Typography>
                      </AccordionDetails>
                    </Accordion>
                  ))} */}
                </Box>
              ) : (
                <Box className={classes.thankYouTitle}>
                  <Typography variant="h4">
                    Thank you for showing your interest
                  </Typography>
                  <Box marginTop="25px">
                    <img
                      className={classes.thankYouImg}
                      src={thankYouImg}
                      alt="Thank You"
                    />
                  </Box>
                  <Box className={classes.descriptionDiv}>
                    <Typography
                      width="80%"
                      margin="auto"
                      className={classes.description}
                    >
                      Please wait while 24x7 AIHR team is verifying your details.
                    </Typography>
                  </Box>
                  {/*<Box>
                    <Typography className={classes.description}>
                      After verification we will send you a link on your
                      registered Email Address.
                    </Typography>
                  </Box>*/}
                  {/* <LoadingButton
                    className={classes.faqButton}
                    size="small"
                    type="submit"
                    variant="contained"
                    onClick={() => setShowFqaSection(true)}
                  >
                    FAQs
                  </LoadingButton> */}
                </Box>
              )}
            </Box>
          )}
        />
      )}
    </>
  );
};

export default ThankYou;
