frontPanel/src/create/createQuestion.tsx

import React from 'react';
import { useField, Form, FormikProps, Formik } from 'formik';
import {
    Select, Textarea, VStack, Checkbox, Button, HStack,
} from '@chakra-ui/react'
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
import Settings from "./settings";
import WorkSpace from "./workSpace";
import Header from "./header";
import { saveCondition, getCondition } from "./lsBacking";
import type {ElementsOfObject} from "./questionTypes"
//Значения, собираемые для отправки на бэк
interface Values {
    title: string;
    children: string;
    description: string;
}

const types = [
    {desc:"текст", value:"text"},
    {desc:"селект", value:"select"},
    {desc:"чекбокс", value:"checkbox"},
    {desc:"файл", value:"file"},
    {desc:"кнопка", value:"button"},
    {desc: "описание", value: "description"},
    {desc:"ничего", value:"none"},
]
export const TextField = (props: any) => {

    const [field, meta, helpers] = useField(props);

    return (
        <>
            <Textarea resize="none" width="80%" {...field} {...props} />
            {meta.touched && meta.error ? (
                <div className="error">{meta.error}</div>
            ) : null}
        </>
    );
};

//Для первого ознакомления рекомендую свернуть все функции и почитать их названия и описания

//Заранее берётся поле children нужного родителя. Функция сама отделит все id от родительской части
//Вернёт число для текущего слоя вложенности (в случае чего надо будет ручками присоединить к строке родителя)
const getFreeNumber = (array:Array<ElementsOfObject>):number => {
    // Для первого элемента в списке
    if (array.length === 0) {
        return(0)
    } else {
        //Для всех последующих элементов

        //Создаём массив, состоящий из id всех существующих модалок
        let indexes:any = []
        //И берём только последние числа от строк, превращая их в числа
        for (let i = 0; i < array.length; i++) {
            //Строка состоит из чисел, разделённых пробелом.

            //Делим строку на массив чисел
            let stringArr = array[i].id.split(" ")
            //Берём последний элемент массива
            stringArr = stringArr.slice(-1)
            indexes.push(Number(stringArr[0]))
        }
        //Сортируем в порядке возрастания
        indexes.sort(function compare(a:any, b:any):any {
                if (a < b) { return -1;}
                if (a > b) { return 1;}
                return 0;
            }
        )
        let max = indexes[indexes.length - 1]

        //Создаём массив - маску от 0 до самого высокого значения id
        let mask:any = []
        for (let i = 0; i <= max; i++) {
            mask.push(i)
        }

        //Ищем разницу между существующими id окон и маской. Список пропущенных значений есть список доступных имён.
        let difference = indexes
            .filter((num:any):any => !mask.includes(num))
            .concat(mask.filter((num:any):any => !indexes.includes(num)));

        // difference - массив нехватающих в списке номеров.
        // Если все окна у нас по порядку, без пропусков - нужно добавить новый номер
        if (difference.length === 0) {
            return(max + 1)
        } else {
            //Иначе добавить нехватающий
            return(difference[0])
        }
    }
}

//Прохождение по полю children в поисках нужного id
const getIndexById = (id:string, array:Array<ElementsOfObject>):number => {
    let index
    for (let i = 0; i <= array.length; i++) {
        if (array[i] !== undefined) {
            if (array[i].id === id) {
                index = i
                break
            }
        }
    }
    if (typeof index === "number") {
        return index
    } else {
        console.log("Я не нашёл нужный индекс, вывел 0")
        return 0
    }

}

//Извлечение информации из id для поиска пути к ребёнку.
const getObjectFromId = (id:string, array:any):any => {
    //Делим строку на массив чисел
    let IDs = id.split(" ")

    // o o o o o  <--
    // \ / \ / |      Проходимся по каждому слою. Значит номер итерации укажет на количество элементов,
    //  o   o  o  <-- кторые нужно добавить к строке currentIteration для получения id родителя на этом уровне вложенности.
    //   \  / /       (наверное, проще её создавать с нуля, зная сколько нужно будет элементов)
    //     o      <--

    const getNewIdString = (index:number) => {
        let id = ""
        for (let i = 0; i < index ;i++) {
            id = id + " " + IDs[i]
        }
        return id.slice(1) //убираем пробел в начале
    }

    //Счётчик вложенности
    let nestingCounter = 0
    //В пересчётах в каждом слое вложенности сюда сохраняется найденный объект
    let bufferObject

    //Считаем до какого уровня вложенности нам вообще искать ребёнка
    let stopIndex = IDs.length

    const searchId = (array:any) => {
        if (nestingCounter === stopIndex) {
            //Мы достигли нужного уровня вложенности
            return
        } else {
            nestingCounter = nestingCounter + 1
            //Создаём строку id текущей вложенности, танцуя от знания порядкового номера этой вложенности
            let calcId = getNewIdString(nestingCounter)
            return (
                //Здесь можно в заранее созданную переменную оповещать нашли ли мы нужный id. И обработать ошибку если нет
                array.forEach((element:any) => {
                    if (element.id === calcId) {
                        //Записываем найденный объект и ищем на следующем уровне
                        bufferObject = element
                        searchId(element.children)
                    }

                })
            )
        }

    }
    searchId(array)
    return bufferObject

    //Есть два варианта поиска:
        //Рекурсивно пройтись по хранилищу тупо ожидая наткнуться на нужного ребёнка
        //Проходиться по каждому слою вложенности, создавая id текущего слоя. Находить объект и повторять
    //Навскидку второй вариант для ветвистых деревьев быстрее и позволит показать на каком уровне вложенности потанцевально может оборваться поиск...
    //при (не дай боже) неверной записи фокусного id
}

export default () => {
    //Id - строится на основании всех id родителя + свободное число от 0 до +бесконечности.
    //Разделение айдишников в строке посредством пробела
    const [stockroom, setStockroom] = React.useState<any>([
        {id: "0", type: 7, children: [
            {
                id: "0 0", type: 7, children: [
                    // {id: "0 0 0", children: [], type: 4}
                ]
            },
            {
                id: "0 1", type: 7, children: [
                    {
                        id: "0 1 0", children: [
                            {id: "0 1 0 0", children: [], type: 4},
                            {id: "0 1 0 1", children: [], type: 4}
                        ], type: 7
                    }
                ]
            },
            {id: "0 2", type: 4, children: []}
        ]}
    ])
    const [focus, setFocus] = React.useState<string | undefined>() //Хранит путь объекта (id)
    // const [focus, setFocus] = React.useState<string | undefined>("1 0 1") //Хранит путь объекта

    const setNewFocus = (value:string, multiFocus:boolean) => {
        //Фокусы ставятся или удаляются от клика по уже созданным элементам.
        if (multiFocus) {
            //Клик ЛКМ + shift - мультивыбор

        } else {
            //Клик ЛКМ - единичный выбор.
            setFocus(value)
        }
    }

    //Функция пересоздаёт дерево с проверкой каждого объекта.
    // Если объект в фокусе - создаётся новый объект и в него высыпаются старые поля, затем новые поля
    const createNewTreeFields = (value:any, tree = stockroom) => {
        return (
            tree.map((node: any) => {

                if (node.id === focus) {
                    let obj = {
                        ...node,
                        ...value,
                    }
                    return (obj)
                } else if (node.children.length !== 0) {
                    return {
                        ...node,
                        children: createNewTreeFields(value, node.children)
                    }
                } else {
                    return node
                }
            })
        )
    }
    //Создание дерева с обновлённым объектом
    const createNewTreeObject = (value:any, tree = stockroom) => {
        return (
            tree.map((node: any) => {
                if (node.id === value.id) {
                    return value
                } else if (node.children.length !== 0) {
                    return {
                        ...node,
                        children: createNewTreeObject(value, node.children)
                    }
                } else {
                    return node
                }
            })
        )
    }

    // Изменение типа очищает все поля
    const typeHC = (type:any): void => {
        if (focus !== undefined) {
            setStockroom(createNewTreeFields({type:type}))
        }
    }
    const colorHC = (color:any) => {
        if (focus !== undefined) {
            setStockroom(createNewTreeFields({color:color}))
        }
    }


    const createObject = (obj:any, type:number = 4) => {
        if (focus !== undefined) {
            //Если фокусный элемент - контейнер, добавление происходит внутрь него
            //Если фокусный элемент - не контейнер, добавление происходит после объекта с фокусом
            const focusedObj = getObjectFromId(focus, stockroom)


            if (focusedObj.type === 7) {
                //Кладём внутрь фокусного объекта

                //Находим свободный ид и прикрепляем его к родительскому id
                let newId:any = getFreeNumber(focusedObj.children)
                newId = focusedObj.id + " " + newId
                //Создаём новый объект
                const newObj = {
                    id: newId,
                    type: type,
                    children: []
                }

                focusedObj.children.push(newObj)

                //Создаём дерево с обновлённым родителем
                const newTree = createNewTreeObject(focusedObj)
                setStockroom(newTree)

            } else {
                //Кладём рядом с фокусным объектом

                //Находим родителя
                //Отфигачиваем последний id
                let parentId:any = focus.split(" ")
                parentId.pop()
                parentId = parentId.join(' ')
                const parentObj = getObjectFromId(parentId, stockroom)

                //Находим свободный ид и прикрепляем его к родительскому id
                let newId:any = getFreeNumber(parentObj.children)
                newId = parentId + " " + newId
                //Создаём новый объект
                const newObj = {
                    id: newId,
                    type: type,
                    children: []
                }

                //Создаём новый массив для поля-children-родителя и присваиваем этот массив
                let newChildrenArr = []
                for (let i = 0; parentObj.children.length > i ; i++) {
                    let node = parentObj.children[i]
                    if (node.id === focus) {
                        newChildrenArr.push(node)
                        newChildrenArr.push(newObj)
                    } else {
                        newChildrenArr.push(node)
                    }
                }
                parentObj.children = newChildrenArr

                //Создаём дерево с обновлённым родителем
                const newTree = createNewTreeObject(parentObj)
                setStockroom(newTree)
            }
        }
    }

    const deleteObject = () => {
        if (focus !== undefined) {
            //Если просто запретить вкладывать объект при создании дерева - будет массив со значением undefined
            //Поэтому скажем родителю, что его массив опустел

            const focusedObj = getObjectFromId(focus, stockroom)

            //Отфигачиваем последний id
            let parentId:any = focus.split(" ")
            parentId.pop()
            parentId = parentId.join(' ')

            const parentObj = getObjectFromId(parentId, stockroom)

            //Создаём новый массив для поля-children-родителя, не включая в него фокусный объект
            let newChildrenArr = []
            for (let i = 0; parentObj.children.length > i ; i++) {
                let node = parentObj.children[i]
                if (node.id !== focus) {
                    newChildrenArr.push(node)
                }
            }
            parentObj.children = newChildrenArr


            let newTree = createNewTreeObject(parentObj)
            console.log(stockroom)
            console.log(newTree)
            setStockroom(newTree)
        }
    }

    // const changeFocus = (id: number): void => {
    //     //Не менять фокус если снова выбрано то же окно
    //     if (focus !== id) {
    //         //Хранилище с отменённым фокусом у объектов (по задумке у одного элемента)
    //         let newArr = stockroom.map((e:ElementsOfObject) => {
    //             e.isFocus = false
    //             return e
    //         })
    //
    //         //Получаем индексы фокусированных объектов. Новый и, если есть, старый
    //         let index = getIndexById(id, stockroom)
    //
    //         //Устанавливаем новый фокус и пересоздаём массив
    //         setFocus(id)
    //         saveCondition("focus", id)
    //
    //         newArr[index].isFocus = true
    //         setStockroom([...newArr])
    //     }
    // }
    // const changeBgColor = (color: string): void => {
    //     if (focus !== undefined) {
    //         let index = getIndexById(focus, stockroom)
    //
    //         let newArr = stockroom
    //         newArr[index].color = color
    //         setStockroom([...newArr])
    //         saveCondition("stockroom", newArr)
    //     }
    // }
    // const changeText = (text: string): void => {
    //     if (focus !== undefined) {
    //         let index = getIndexById(focus, stockroom)
    //         let newArr = stockroom
    //         newArr[index].text = text
    //         setStockroom([...newArr])
    //         saveCondition("stockroom", newArr)
    //     }
    // }
    //
    // const createObject = (obj:ElementsOfObject) => {
    //
    //     //Получаем и присваиваем первый свободный айдишник (по возрастанию)
    //     const free = getFreeNumber(stockroom)
    //     obj.id = free
    //
    //     //Хранилище с отменённым фокусом у объектов (по задумке у одного элемента)
    //     let newArr = stockroom.map((e:ElementsOfObject) => {
    //         e.isFocus = false
    //         return e
    //     })
    //
    //     //Мы должны вставить новый объект следующим после того, на котором фокус. Это достигается позиционированием в массив
    //     if (focus === undefined){ //фокуса нет - добавляем в конец массива
    //         newArr.push(obj)
    //         setStockroom([...newArr])
    //         saveCondition("stockroom", newArr)
    //         //Говорим стейту с фокусом, что фокус изменился
    //         setFocus(newArr.length - 1)
    //     } else { //фокус есть - добавляем после объекта с фокусом
    //
    //
    //
    //         let index = getIndexById(focus, stockroom)
    //         let current = stockroom[index]
    //         //Объект в фокусе - контейнер. Новый объект создаётся с указанием, что контейнер - родитель
    //         if (current.type === 7) {
    //             obj.parent = current.id
    //         }
    //
    //         newArr.splice(index + 1, 0, obj)
    //
    //         //Говорим стейту с фокусом, что фокус изменился
    //         setFocus(index + 1)
    //         setStockroom([...newArr])
    //         saveCondition("stockroom", newArr)
    //     }
    // }
    // const deleteObject = (id: number): void => {
    //     let index = getIndexById(id, stockroom)
    //     //Проверка, что объект с таким id существует
    //     if (stockroom[index] !== undefined) {
    //         //Если удалён был фокусный объект - фокус теперь неизвестен
    //         if (stockroom[index].isFocus) {
    //             setFocus(undefined)
    //         }
    //
    //         let newArr:any = []
    //         //Если удалённый объект был хранилищем (контейнером, или селектом), мы не вложим в новый массив его и его потомков
    //         if (stockroom[index].type === 1 || stockroom[index].type === 7) {
    //             stockroom.forEach((e:any, i:number) => {
    //                 if (e.id !== id) {
    //                     if (e.parent !== id) {
    //                         newArr.push(e)
    //                     } else {
    //                         if (e.isFocus) {
    //                             setFocus(undefined)
    //                         }
    //                     }
    //                 }
    //             })
    //         } else {
    //             newArr = stockroom
    //             newArr.splice(index, 1)
    //         }
    //         setStockroom([...newArr])
    //         saveCondition("stockroom", newArr)
    //     }
    // }
    return(
        <>
            <Header/>
            <HStack
                justifyContent="space-between"
                alignItems="normal"
            >
                <VStack
                    minWidth="200px"
                    bgColor="lightgray"
                    height="98vh"
                    padding="10px"
                    >

                </VStack>

                <VStack>
                    <WorkSpace
                        stockroom={stockroom}
                        setNewFocus={setNewFocus}
                        focus={focus}
                    />
                </VStack>

                <VStack
                    minWidth="250px"
                    bgColor="lightgray"
                    height="98vh"
                    padding="10px"
                    overflow="auto"
                    >
                    <Settings
                        types={types}
                        stockroom={stockroom}
                        typeHC={typeHC}
                        focus={focus}
                        changeFocus={stockroom}
                        changeBgColor={colorHC}
                        changeText={stockroom}
                        getIndexById={getIndexById}
                        createObject={createObject}
                        deleteObject={deleteObject}
                    />
                    <Button onClick={() => {
                        console.log(stockroom)
                    }}>info</Button>
                </VStack>
            </HStack>
        </>
    )
}