import { reactive } from 'vue'

const useEditModal = () => {
    const modalConfig = reactive({
        modalEditVisible: false,
        modalHandleKey: {},
        title: '',
        modalType: ''
    })

    const resetMoalConfig = () => {
        modalConfig.modalEditVisible = false
        modalConfig.modalHandleKey = {}
        modalConfig.title = ''
        modalConfig.modalType = ''
    }

    const tableOperationView = (title, keys) => {
        modalConfig.modalHandleKey = keys
        modalConfig.modalEditVisible = true;
        modalConfig.title = title;
        modalConfig.modalType = 'view';
    }

    const tableOperationAdd = (title, keys) => {
        modalConfig.modalHandleKey = keys
        modalConfig.modalEditVisible = true;
        modalConfig.title = title;
        modalConfig.modalType = 'add';
    }

    const tableOperationEdit = (title, keys) => {
        modalConfig.modalHandleKey = keys
        modalConfig.modalEditVisible = true;
        modalConfig.title = title;
        modalConfig.modalType = 'edit';
    }

    //2
    const modalConfig2 = reactive({
        modalEditVisible: false,
        modalHandleKey: {},
        title: '',
        modalType: ''
    })

    const resetMoalConfig2 = () => {
        modalConfig2.modalEditVisible = false
        modalConfig2.modalHandleKey = {}
        modalConfig2.title = ''
        modalConfig2.modalType = ''
    }

    const tableOperationView2 = (title, keys) => {
        modalConfig2.modalHandleKey = keys
        modalConfig2.modalEditVisible = true;
        modalConfig2.title = title;
        modalConfig2.modalType = 'view';
    }

    const tableOperationAdd2 = (title, keys) => {
        modalConfig2.modalHandleKey = keys
        modalConfig2.modalEditVisible = true;
        modalConfig2.title = title;
        modalConfig2.modalType = 'add';
    }

    const tableOperationEdit2 = (title, keys) => {
        modalConfig2.modalHandleKey = keys
        modalConfig2.modalEditVisible = true;
        modalConfig2.title = title;
        modalConfig2.modalType = 'edit';
    }

    //3
    const modalConfig3 = reactive({
        modalEditVisible: false,
        modalHandleKey: {},
        title: '',
        modalType: ''
    })

    const resetMoalConfig3 = () => {
        modalConfig3.modalEditVisible = false
        modalConfig3.modalHandleKey = {}
        modalConfig3.title = ''
        modalConfig3.modalType = ''
    }

    const tableOperationView3 = (title, keys) => {
        modalConfig3.modalHandleKey = keys
        modalConfig3.modalEditVisible = true;
        modalConfig3.title = title;
        modalConfig3.modalType = 'view';
    }

    const tableOperationAdd3 = (title, keys) => {
        modalConfig3.modalHandleKey = keys
        modalConfig3.modalEditVisible = true;
        modalConfig3.title = title;
        modalConfig3.modalType = 'add';
    }

    const tableOperationEdit3 = (title, keys) => {
        modalConfig3.modalHandleKey = keys
        modalConfig3.modalEditVisible = true;
        modalConfig3.title = title;
        modalConfig3.modalType = 'edit';
    }

    //4
    const modalConfig4 = reactive({
        modalEditVisible: false,
        modalHandleKey: {},
        title: '',
        modalType: ''
    })

    const resetMoalConfig4 = () => {
        modalConfig4.modalEditVisible = false
        modalConfig4.modalHandleKey = {}
        modalConfig4.title = ''
        modalConfig4.modalType = ''
    }

    const tableOperationView4 = (title, keys) => {
        modalConfig4.modalHandleKey = keys
        modalConfig4.modalEditVisible = true;
        modalConfig4.title = title;
        modalConfig4.modalType = 'view';
    }

    const tableOperationAdd4 = (title, keys) => {
        modalConfig4.modalHandleKey = keys
        modalConfig4.modalEditVisible = true;
        modalConfig4.title = title;
        modalConfig4.modalType = 'add';
    }

    const tableOperationEdit4 = (title, keys) => {
        modalConfig4.modalHandleKey = keys
        modalConfig4.modalEditVisible = true;
        modalConfig4.title = title;
        modalConfig4.modalType = 'edit';
    }

    return {
        modalConfig,
        resetMoalConfig,
        tableOperationAdd,
        tableOperationEdit,
        tableOperationView,
        modalConfig2,
        resetMoalConfig2,
        tableOperationAdd2,
        tableOperationEdit2,
        tableOperationView2,
        modalConfig3,
        resetMoalConfig3,
        tableOperationAdd3,
        tableOperationEdit3,
        tableOperationView3,
        modalConfig4,
        resetMoalConfig4,
        tableOperationAdd4,
        tableOperationEdit4,
        tableOperationView4
    }
}

export default useEditModal;