112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
import { useTheme } from "@mui/material";
|
||
import {
|
||
Dispatch,
|
||
FC,
|
||
SetStateAction,
|
||
useCallback,
|
||
useMemo,
|
||
useState,
|
||
} from "react";
|
||
import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView";
|
||
import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView";
|
||
import { TagQuestionObject, TitleKeys, TQuestionEntity } from "../AmoCRMModal";
|
||
import Box from "@mui/material/Box";
|
||
import type { AllTypesQuestion } from "@model/questionTypes/shared"
|
||
import { getQuestionById } from "@/stores/questions/actions";
|
||
import { useQuestionsStore } from "@/stores/questions/store";
|
||
|
||
type Props = {
|
||
handlePrevStep: () => void;
|
||
handleNextStep: () => void;
|
||
questionEntity: TQuestionEntity;
|
||
setQuestionEntity: Dispatch<SetStateAction<TQuestionEntity>>;
|
||
questions: AllTypesQuestion[];
|
||
};
|
||
|
||
export const AmoStep7: FC<Props> = ({
|
||
handlePrevStep,
|
||
handleNextStep,
|
||
questionEntity,
|
||
setQuestionEntity,
|
||
questions,
|
||
}) => {
|
||
const theme = useTheme();
|
||
const [isSelection, setIsSelection] = useState<boolean>(false);
|
||
const [activeItem, setActiveItem] = useState<string | null>(null);
|
||
const [selectedValue, setSelectedValue] = useState<string | null>(null);
|
||
|
||
const handleAdd = useCallback(() => {
|
||
if (!activeItem || !selectedValue) return;
|
||
|
||
setQuestionEntity((prevState) => ({
|
||
...prevState,
|
||
[activeItem]: [...prevState[activeItem as TitleKeys], selectedValue],
|
||
}));
|
||
}, [activeItem, setQuestionEntity, selectedValue]);
|
||
|
||
const items: TagQuestionObject[] = useMemo(
|
||
() => Object.values(questions)
|
||
.filter(({ type }) =>
|
||
type !== "result"
|
||
&& type !== null)
|
||
.map(({ backendId, title }) => ({
|
||
backendId: backendId.toString(),
|
||
title
|
||
})),
|
||
[],
|
||
);
|
||
const translatedQuestionEntity = useMemo(() => {
|
||
const translated = {} as TQuestionEntity;
|
||
|
||
for (let key in questionEntity) {
|
||
// /* ... делать что-то с obj[key] ... */
|
||
translated[key] = questionEntity[key].map((id) =>
|
||
questions.find((q) => q.backendId === Number(id))?.title || id
|
||
)
|
||
}
|
||
|
||
console.log("questionEntity", questionEntity)
|
||
console.log("translated", translated)
|
||
return translated
|
||
},
|
||
[questionEntity],
|
||
)
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
height: "100%",
|
||
flexGrow: 1,
|
||
}}
|
||
>
|
||
{isSelection ? (
|
||
<ItemsSelectionView
|
||
items={items}
|
||
type="typeQuestions"
|
||
selectedValue={selectedValue}
|
||
setSelectedValue={setSelectedValue}
|
||
onSmallBtnClick={() => {
|
||
setActiveItem(null);
|
||
setIsSelection(false);
|
||
}}
|
||
onLargeBtnClick={() => {
|
||
handleAdd();
|
||
setActiveItem(null);
|
||
setIsSelection(false);
|
||
}}
|
||
/>
|
||
) : (
|
||
<ItemDetailsView
|
||
setIsSelection={setIsSelection}
|
||
handleLargeBtn={handleNextStep}
|
||
handleSmallBtn={handlePrevStep}
|
||
questionEntity={translatedQuestionEntity}
|
||
setActiveItem={setActiveItem}
|
||
/>
|
||
)}
|
||
</Box>
|
||
);
|
||
};
|