SearchCreateDIalogWithAnswers

const SearchCreateDialog = ({
  open,
  onClose,
  record,
  createInitialValues,
  afterCreate,
  selectedButtonText,
  selectedButtonOnClick,
}) => {
  const [selected, setSelected] = React.useState([]);
  const [questions, setQuestions] = React.useState(null);
  const [openAnswer, setOpenAnswer] = React.useState(false);
  const [contextOnlySlider, setContextOnlySlider] = React.useState(false);
  const translate = useTranslate();
  const dataProvider = useDataProvider();
  const notify = useNotify();
  const refresh = useRefresh();

  const [answers, setAnswers] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [openL, setOpenL] = React.useState(false);

  const [vals, setVals] = React.useState();

  const onCreateSubmit = async (values) => {
    setVals(values);
    console.warn(questions.map((el) => el.text === values.text).includes(true), 'val');
    if (questions.map((el) => el.text === values.text).includes(true)) {
      setContextOnlySlider(true);
    }
    if (!questions.length || !selected.length) {
      setOpenAnswer(true);
      return;
    }
  };

  const f = React.useCallback(async () => {
    try {
      const { data } = await dataProvider.create('questions', {
        data: {
          ...vals,
          ...createInitialValues,
        },
      });
      await afterCreate(data);

      return data;
    } catch (e) {
      notify(e?.body?.message || 'Unexpected error', 'error');
      return null;
    }
  }, [vals, createInitialValues]);

  const onFiltersSubmit = debounce(async (values) => {
    setSelected([]);
    if (!values.q) {
      setQuestions(null);

      return;
    }
    try {
      const filter = { ...values };

      if (record && record.fk_topicId) {
        filter.fk_topicId = record.fk_topicId;
      }

      if (record && record.fk_languageId) {
        filter.fk_languageId = record.fk_languageId;
      }

      const { data } = await dataProvider.getList('questions', {
        filter,
        pagination: { perPage: 50, page: 1 },
      });

      setQuestions(data);
    } catch (err) {
      notify(err?.body?.message || 'Unexpected error', 'error');
    }
  }, 500);

  const toggleSelect = (question) => {
    if (selected.includes(question.id)) {
      setSelected(selected.filter((s) => s !== question.id));
    } else {
      setSelected(selected.concat([question.id]));
    }
  };

  const onSelectedSubmit = () => {
    selectedButtonOnClick(selected);
  };
  const answersWithoutContextOnly = answers?.filter((ans) => !ans.isContextOnly);

  React.useEffect(() => {
    if (open) {
      setSelected([]);
      setQuestions(null);
    }
  }, [open]);

  if (!open) {
    return null;
  }

  const onSelectLink = async (fk_answerId) => {
    const questionRecord = await afterCreate?.();

    try {
      await dataProvider.update('questions', {
        id: questionRecord?.id ?? record?.id,
        data: {
          fk_answerId,
        },
      });
      notify('The record has been updated');
      // if (afterLink) {
      //   afterLink();
      // } else {
      //   refresh();
      // }
refresh()
      setOpenL(false);
    } catch (e) {
      notify(e?.body?.message || 'Unexpected error', 'error');
    }
  };
  const onSelect = async (fk_answerId, recordId = record?.id) => {
    try {
      await dataProvider.update('questions', {
        id: recordId,
        data: {
          fk_answerId,
        },
      });
      notify('The record has been updated');
      setOpenL(false);
      // if (afterLink) {
      //   afterLink();
      // } else {
      //   refresh();
      // }
      refresh()
    } catch (e) {
      notify(e?.body?.message || 'Unexpected error', 'error');
    }
  };

  const onCreateSubmitAnswer = async (values) => {
    try {
      const questionRecord = await afterCreate?.();
      const { data } = await dataProvider.create('answers', {
        data: {
          ...values,
          fk_topicId: questionRecord?.fk_topicId ?? record?.fk_topicId,
          fk_languageId: questionRecord?.fk_languageId ?? record?.fk_languageId,
          isFollowup: questionRecord?.isFollowup ?? record?.isFollowup,
        },
      });
      await onSelect(data.id, questionRecord.id);
    } catch (e) {
      notify(e?.body?.message || 'Unexpected error', 'error');
    }
    setOpenL(false);
  };

  const onFiltersSubmitAnswer = debounce(async (values) => {
    if (!values?.q) {
      setAnswers(null);

      return;
    }

    setLoading(true);

    try {
      const filter = { ...values };

      const { data } = await dataProvider.getList('answers', {
        filter,
        pagination: { perPage: 50, page: 1 },
      });

      setAnswers(data);
      // refresh();
    } catch (err) {
      notify(err?.body?.message || 'Unexpected error', 'error');
    }
    setLoading(false);
  }, 500);
  console.log(record, 'record');
  return (
    <>

      {!openAnswer ? (
        <Dialog open onClose={onClose} fullWidth maxWidth="lg">
          <Box display="flex" p={2}>
            <Box flex={5}>
              <Typography>
                {translate('resources.answers.related_questions')}
              </Typography>
            </Box>
            <Box flex={1} textAlign="right">
              <IconButton
                onClick={onClose}
              >
                <CloseIcon />
              </IconButton>
            </Box>
          </Box>
          <Box p={2}>
            <Filters
              onSubmit={onFiltersSubmit}
              onCreateSubmit={onCreateSubmit}
              selected={selected}
              onSelectedSubmit={onSelectedSubmit}
              selectedButtonText={selectedButtonText}
            />
            <hr />
            <ResultsList
              {...{
                questions,
                selected,
                toggleSelect,
                record,
              }}
            />
          </Box>
        </Dialog>
      ) : (

        openAnswer && (
          <>
            <Dialog open={openL} onClose={() => setOpenL(false)} maxWidth="lg" fullWidth disableBackdropClick onClick={(e) => e.stopPropagation()}>
              <Box p={2} display="flex" borderBottom="1px solid #D5D5D5">
                <Box flex="2">
                  <Typography>{translate('misc.link_answer')}</Typography>
                </Box>
                <Box flex="1" textAlign="right">
                  <IconButton onClick={() => setOpenL(false)} size="small">
                    <CloseIcon fontSize="small" />
                  </IconButton>
                </Box>
              </Box>
              <Box p={2}>
                <FiltersAnswer onSubmit={onFiltersSubmitAnswer} contextOnlySlider={contextOnlySlider} onCreateSubmit={onCreateSubmitAnswer} />
                {
                  loading && (
                    <Box textAlign="center" p={2}>
                      <CircularProgress color="primary" />
                    </Box>
                  )
                }
                <ResultsListAnswer answers={answersWithoutContextOnly} onSelect={onSelectLink} />
              </Box>
            </Dialog>
          </>
        )

      )}
    </>
  );
};