frontPanel/src/stores/questions.ts

import { create } from "zustand";
import { persist } from "zustand/middleware";

export type Variants = {
  answer: string;
  hints: string;
  emoji: string;
};

type Hint = {
  text: string;
  video: string;
};

type Rule = {
  or: boolean;
  show: boolean;
  reqs: [
    {
      id: string;
      vars: number[];
    }
  ];
};

export interface Question {
  id: number;
  title: string;
  description: string;
  type: string;
  required: boolean;
  deleted: true;
  page: number;
  content: {
    variants: Variants[];
    hint: Hint;
    rule: Rule;
    images: string[];
    largeCheck: boolean;
    large: string;
    multi: boolean;
    own: boolean;
    innerNameCheck: boolean;
    innerName: string;
    back: string;
    placeholder: string;
    type: string;
    autofill: boolean;
    default: string;
    single: boolean;
    number: boolean;
    xy: string;
    format: "carousel" | "masonry";
    text: string;
    picture: string;
    video: string;
    dateRange: boolean;
    time: boolean;
    form: string;
    steps: number;
    range: string;
    start: number;
    step: number;
    chooseRange: boolean;
    required: boolean;
    replText: string;
    ratingNegativeDescription: string;
    ratingPositiveDescription: string;
  };
  version: number;
  parent_ids: number[];
  created_at: string;
  updated_at: string;
  expanded: boolean;
}

interface QuestionStore {
  listQuestions: Record<string, Question[]>;
  openedModalSettings: string;
}

export const DEFAULT_QUESTION: Omit<Question, "id"> = {
  title: "",
  description: "",
  type: "",
  required: true,
  deleted: true,
  page: 0,
  content: {
    largeCheck: false,
    large: "",
    multi: false,
    own: false,
    innerNameCheck: false,
    innerName: "",
    back: "",
    placeholder: "",
    type: "all",
    autofill: true,
    default: "",
    images: [],
    number: false,
    single: false,
    xy: "",
    format: "carousel",
    text: "",
    picture: "",
    video: "",
    dateRange: false,
    time: false,
    form: "star",
    steps: 5,
    range: "0—100",
    start: 50,
    step: 1,
    chooseRange: false,
    required: false,
    replText: "",
    ratingNegativeDescription: "",
    ratingPositiveDescription: "",
    variants: [
      {
        answer: "",
        hints: "",
        emoji: "",
      },
    ],
    hint: {
      text: "",
      video: "",
    },
    rule: {
      or: true,
      show: true,
      reqs: [
        {
          id: "",
          vars: [],
        },
      ],
    },
  },
  version: 0,
  parent_ids: [0],
  created_at: "",
  updated_at: "",
  expanded: false,
};

export const questionStore = create<QuestionStore>()(
  persist<QuestionStore>(
    () => ({
      listQuestions: {},
      openedModalSettings: "",
    }),

    {
      name: "question",
    }
  )
);
export const updateQuestionsList = (
  quizId: number,
  index: number,
  data: Partial<Question>
) => {
  const questionListClone = { ...questionStore.getState()["listQuestions"] };
  questionListClone[quizId][index] = {
    ...questionListClone[quizId][index],
    ...data,
  };
  questionStore.setState({ listQuestions: questionListClone });
};

export const updateQuestionsListDragAndDrop = (
  quizId: number,
  updatedQuestions: Question[]
) => {
  const questionListClone = { ...questionStore.getState()["listQuestions"] };
  questionStore.setState({
    listQuestions: { ...questionListClone, [quizId]: updatedQuestions },
  });
};

export const updateVariants = (
  quizId: number,
  index: number,
  variants: Variants[]
) => {
  const listQuestions = { ...questionStore.getState()["listQuestions"] };
  listQuestions[quizId][index].content.variants = variants;

  questionStore.setState({ listQuestions });
};

export const createQuestion = (quizId: number, placeIndex = -1) => {
  const id = getRandom(1000000, 10000000);
  const newData = { ...questionStore.getState()["listQuestions"] };

  if (!newData[quizId]) {
    newData[quizId] = [];
  }

  newData[quizId].splice(
    placeIndex < 0 ? newData[quizId].length : placeIndex,
    0,
    { ...DEFAULT_QUESTION, id }
  );

  questionStore.setState({ listQuestions: newData });
};

export const copyQuestion = (quizId: number, copiedQuestionIndex: number) => {
  const listQuestions = { ...questionStore.getState()["listQuestions"] };

  listQuestions[quizId].splice(
    copiedQuestionIndex,
    0,
    listQuestions[quizId][copiedQuestionIndex]
  );

  questionStore.setState({ listQuestions });
};

export const removeQuestion = (quizId: number, index: number) => {
  const questionListClone = { ...questionStore.getState()["listQuestions"] };

  questionListClone[quizId].splice(index, 1);

  questionStore.setState({ listQuestions: questionListClone });
};

export const resetSomeField = (data: Record<string, string>) => {
  questionStore.setState(data);
};

export const findQuestionById = (quizId: number) => {
  let found = null;
  questionStore
    .getState()
    ["listQuestions"][quizId].some((quiz: Question, index: number) => {
      if (quiz.id === quizId) {
        found = { quiz, index };
        return true;
      }
    });
  return found;
};

function getRandom(min: number, max: number) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}