import ReactSelect from "react-select";
import NamingTemplate from "../ShortcodeBuilder/Form/Fields/NamingTemplate";
import {showProModal} from "../../includes/ProModal";
import {getRootFolders} from "../../includes/functions";

const {useEffect, useState} = React;
const {FormToggle, Button} = wp.components;

const {ModuleBuilderModal} = window;

export default function PrivateFoldersSettings({data, setData}) {

    const {isPro, accounts, activeAccount} = igd;

    const {
        autoPrivateFolders,
        privateFolderRoles = ['editor', 'author', 'contributor'],

        deleteAutoPrivateFolders,
        nameTemplate = '%user_login% (%user_email%)',
        parentFolder = getRootFolders(activeAccount.root_id),
        templateFolder,
        mergeFolders = true,
        privateFoldersInAdminDashboard,
        sharePrivateFolder,
    } = data;

    // Users data
    const [userData, setUserData] = useState(null);

    const usersOptions = userData && [
        {label: wp.i18n.__('All', "integrate-google-drive"), value: 'all'},

        ...Object.keys(userData.roles).map(key => {

            return {
                label: `${key} (role)`,
                value: key
            }
        }),

        ...userData.users.map(({username, email, id}) => {

            return {
                label: `${username} (${email})`,
                value: parseInt(id)
            }
        }),
    ];

    useEffect(() => {
        wp.ajax.post('igd_get_users_data', {
            nonce: igd.nonce,
        }).then((data) => {
            setUserData(data)
        });
    }, []);

    return (
        <div className="igd-settings-body">
            <div className="igd-settings-body-header">

                <h3 className="igd-settings-body-title">
                    {wp.i18n.__('Private Folders', 'integrate-google-drive')}

                    <a href="https://softlabbd.com/docs/how-to-use-and-enable-private-folders-automatically-link-manually/"
                       target="_blank" className="igd-btn btn-outline-info">
                        <i className="dashicons dashicons-info-outline"></i>
                        {wp.i18n.__('Documentation', 'integrate-google-drive')}
                    </a>
                </h3>

                <p className="igd-settings-body-subtitle">
                    {wp.i18n.__("Configure settings for automatically creating and managing private Google Drive folders for new users upon registration.", "integrate-google-drive")}
                </p>

            </div>

            {/* Creates Private Folders */}
            <div className="settings-field">
                <h4 className="settings-field-label">
                    {wp.i18n.__("Auto-Create Folder for New Users", "integrate-google-drive")}
                </h4>

                <div className="settings-field-content">
                    <FormToggle
                        checked={isPro && autoPrivateFolders}
                        className={!isPro ? 'disabled pro-disabled' : ''}
                        onChange={() => {
                            if (!isPro) {
                                showProModal(wp.i18n.__('Upgrade to PRO to enable auto private folders creation on user registration.', 'integrate-google-drive'));

                                return;
                            }
                            setData({...data, autoPrivateFolders: !autoPrivateFolders})
                        }}
                    />

                    <p className="description">
                        {wp.i18n.__(
                            "Control whether private folders are created automatically for users.",
                            "integrate-google-drive"
                        )}
                        <br/>
                        {wp.i18n.__(
                            "Enabling this option will generate a dedicated private Google Drive folder for each new user upon registration.",
                            "integrate-google-drive"
                        )}
                    </p>

                </div>
            </div>

            {(isPro && autoPrivateFolders) &&
                <>
                    {/* Private Folder User Roles */}
                    <div className="settings-field">
                        <h4 className="settings-field-label">{wp.i18n.__("Filter User Roles", 'integrate-google-drive')}</h4>

                        <div className="settings-field-content">
                            <ReactSelect
                                isMulti
                                placeholder={"Select user roles"}
                                options={usersOptions}
                                value={!!userData ? usersOptions.filter(item => privateFolderRoles.includes(item.value)) : []}
                                onChange={selected => setData({
                                    ...data,
                                    privateFolderRoles: [...selected.map(item => item.value)]
                                })}
                                className="igd-select"
                                classNamePrefix="igd-select"
                                isClearable={true}
                            />

                            <p className="description">{wp.i18n.__("Select the user roles for which the private folders will be created.", "integrate-google-drive")}</p>
                        </div>

                    </div>

                    {/* Name Template */}
                    <NamingTemplate
                        value={nameTemplate}
                        onUpdate={(nameTemplate) => setData(data => ({...data, nameTemplate}))}
                        type={'folder'}
                    />

                    {/* Parent Folder */}
                    <div className="settings-field">
                        <h4 className="settings-field-label">{wp.i18n.__("Parent Folder", "integrate-google-drive")} </h4>

                        <div className="settings-field-content">

                            <div className="template-folder-wrap">
                                {!!parentFolder &&
                                    <div className="template-folder">

                                        <div className="template-folder-item">

                                            <div className="template-folder-account">
                                                {accounts[parentFolder.accountId]?.email}
                                            </div>

                                            <img
                                                src={parentFolder.iconLink || `${igd.pluginUrl}/assets/images/icons/folder.png`}/>
                                            <span
                                                className="template-folder-name">{!!parentFolder.name ? parentFolder.name : getRootFolders(parentFolder)}</span>

                                            <Button
                                                className="template-folder-remove-btn"
                                                onClick={() => setData({...data, parentFolder: null})}
                                                icon={'no-alt'}
                                                label={wp.i18n.__("Remove")}
                                            />

                                        </div>

                                    </div>
                                }

                                <button
                                    className="igd-btn btn-info"
                                    onClick={() => {

                                        if (!isPro) {
                                            showProModal(wp.i18n.__('Upgrade to PRO to enable auto private folders creation on user registration.', 'integrate-google-drive'));

                                            return;
                                        }

                                        Swal.fire({
                                            html: `<div id="igd-select-files" class="igd-module-builder-modal-wrap"></div>`,
                                            showConfirmButton: false,
                                            customClass: {
                                                container: 'igd-module-builder-modal-container'
                                            },
                                            didOpen(popup) {
                                                const element = document.getElementById('igd-select-files');

                                                ReactDOM.render(
                                                    <ModuleBuilderModal
                                                        initData={{folders: !!parentFolder ? [parentFolder] : []}}
                                                        onUpdate={data => {
                                                            const {folders = []} = data;
                                                            setData(data => ({...data, parentFolder: folders[0]}));
                                                            Swal.close();
                                                        }}
                                                        onClose={() => Swal.close()}
                                                        isSelectFiles
                                                        selectionType="parent"
                                                    />, element);
                                            },

                                            willClose(popup) {
                                                const element = document.getElementById('igd-select-files');
                                                ReactDOM.unmountComponentAtNode(element);
                                            }
                                        });

                                    }}
                                >
                                    <i className="dashicons dashicons-open-folder"></i>
                                    <span>{!!parentFolder ? wp.i18n.__('Change Parent Folder', 'integrate-google-drive') : wp.i18n.__('Select Parent Folder', 'integrate-google-drive')}</span>
                                </button>

                            </div>
                            <p className="description">{wp.i18n.__("Select the parent folder for the newly created private folders. All the private folders will be created within the selected parent folder.", "integrate-google-drive")}</p>
                        </div>
                    </div>

                    {/* Template Folder */}
                    <div className="settings-field">
                        <h4 className="settings-field-label">{wp.i18n.__("Template Folder", "integrate-google-drive")} </h4>
                        <div className="settings-field-content">
                            <div className="template-folder-wrap">
                                {!!templateFolder &&
                                    <div className="template-folder">

                                        <div className="template-folder-item">

                                            <div className="template-folder-account">
                                                {accounts[templateFolder.accountId]?.email}
                                            </div>

                                            <img
                                                src={templateFolder.iconLink || `${igd.pluginUrl}/assets/images/icons/folder.png`}/>
                                            <span
                                                className="template-folder-name">{!!templateFolder.name ? templateFolder.name : getRootFolders(templateFolder)}</span>

                                            <Button
                                                className="template-folder-remove-btn"
                                                onClick={() => setData({...data, templateFolder: null})}
                                                icon={'no-alt'}
                                                label={wp.i18n.__("Remove")}
                                            />

                                        </div>
                                    </div>
                                }

                                <button
                                    className="igd-btn btn-info"
                                    onClick={() => {

                                        if (!isPro) {
                                            showProModal(wp.i18n.__('Upgrade to PRO to enable auto private folders creation on user registration.', 'integrate-google-drive'));

                                            return;
                                        }

                                        Swal.fire({
                                            html: `<div id="igd-select-files" class="igd-module-builder-modal-wrap single"></div>`,
                                            showConfirmButton: false,
                                            customClass: {
                                                container: 'igd-module-builder-modal-container'
                                            },
                                            didOpen(popup) {
                                                const element = document.getElementById('igd-select-files');

                                                ReactDOM.render(
                                                    <ModuleBuilderModal
                                                        initData={{folders: !!templateFolder ? [templateFolder] : []}}
                                                        onUpdate={data => {
                                                            const {folders = []} = data;
                                                            setData(data => ({...data, templateFolder: folders[0]}));
                                                            Swal.close();
                                                        }}
                                                        onClose={() => Swal.close()}
                                                        isSelectFiles
                                                        selectionType="template"
                                                    />, element);
                                            },

                                            willClose(popup) {
                                                const element = document.getElementById('igd-select-files');
                                                ReactDOM.unmountComponentAtNode(element);
                                            }
                                        });

                                    }}
                                >
                                    <i className="dashicons dashicons-open-folder"></i>
                                    <span>{!!templateFolder ? wp.i18n.__('Change Template Folder', 'integrate-google-drive') : wp.i18n.__('Select Template Folder', 'integrate-google-drive')}</span>
                                </button>

                            </div>

                            {!!parentFolder && !!templateFolder && parentFolder.accountId !== templateFolder.accountId &&
                                <div className="template-folder-error">
                                    <i className="dashicons dashicons-warning"></i>
                                    <span>{wp.i18n.__('Template folder and parent folder must be from the same account.', 'integrate-google-drive')}</span>
                                </div>
                            }

                            {!!parentFolder && !!templateFolder && parentFolder.id === templateFolder.id &&
                                <div className="template-folder-error">
                                    <i className="dashicons dashicons-warning"></i>
                                    <span>{wp.i18n.__(`Template folder and parent folder can't be the same.`, 'integrate-google-drive')}</span>
                                </div>
                            }

                            <p className="description">{wp.i18n.__("Select the template folder for the newly created private folders. All the files and folders within the template folder will be copied to the newly created private folders for the users.", "integrate-google-drive")}</p>

                        </div>

                    </div>

                </>
            }

            {/* Share Folder with User */}
            <div className="settings-field">
                <h4 className="settings-field-label">
                    {wp.i18n.__("Share Folder with User", "integrate-google-drive")}
                </h4>
                <div className="settings-field-content">
                    <FormToggle
                        checked={isPro && sharePrivateFolder}
                        className={!isPro ? 'disabled pro-disabled' : ''}
                        onChange={() => {
                            if (!isPro) {
                                showProModal(wp.i18n.__('Upgrade to PRO to enable auto private folders creation on user registration.', 'integrate-google-drive'));

                                return;
                            }

                            setData({...data, sharePrivateFolder: !sharePrivateFolder})
                        }}
                    />

                    <p className="description">{wp.i18n.__("Grant the user access to the cloud folder by adding their email to its sharing permissions. They’ll be able to access it directly through the cloud.", "integrate-google-drive")}</p>
                </div>
            </div>

            {/* Merge Folders */}
            <div className="settings-field">
                <h4 className="settings-field-label">
                    {wp.i18n.__("Merge Folders", "integrate-google-drive")}
                </h4>

                <div className="settings-field-content">
                    <FormToggle
                        checked={isPro && mergeFolders}
                        className={!isPro ? 'disabled pro-disabled' : ''}
                        onChange={() => {

                            if (!isPro) {
                                showProModal(wp.i18n.__('Upgrade to PRO to enable auto private folders creation on user registration.', 'integrate-google-drive'));
                                return;
                            }

                            setData({...data, mergeFolders: !mergeFolders})
                        }}
                    />

                    <p className="description">{wp.i18n.__("Enable the merging of folders when a folder with a same name already exists, rather than creating a new folder.", "integrate-google-drive")}</p>

                </div>
            </div>

            {/* Private Folders in Admin Dashboard */}
            <div className="settings-field">
                <h4 className="settings-field-label">
                    {wp.i18n.__("Private Folders in Admin Dashboard", "integrate-google-drive")}
                </h4>

                <div className="settings-field-content">
                    <FormToggle
                        checked={isPro && privateFoldersInAdminDashboard}
                        className={!isPro ? 'disabled pro-disabled' : ''}
                        onChange={() => {

                            if (!isPro) {
                                showProModal(wp.i18n.__('Upgrade to PRO to allow private folders in admin dashboard.', 'integrate-google-drive'));
                                return;
                            }

                            setData({...data, privateFoldersInAdminDashboard: !privateFoldersInAdminDashboard})
                        }}
                    />

                    <p className="description">{wp.i18n.__("Allow users to access the linked private folders in admin dashboard file browser.", "integrate-google-drive")}</p>

                </div>
            </div>

            {/* Delete Private Folders */}
            <div className="settings-field">
                <h4 className="settings-field-label">
                    {wp.i18n.__("Delete Private Folders on WP User Delete", "integrate-google-drive")}
                </h4>

                <div className="settings-field-content">
                    <FormToggle
                        className={!isPro ? 'disabled pro-disabled' : ''}
                        checked={isPro && deleteAutoPrivateFolders}
                        onChange={() => {
                            if (!isPro) {
                                showProModal(wp.i18n.__('Upgrade to PRO to enable auto private folders creation on user registration.', 'integrate-google-drive'));

                                return;
                            }
                            setData({...data, deleteAutoPrivateFolders: !deleteAutoPrivateFolders})
                        }}
                    />

                    <p className="description">{wp.i18n.__("If ON, Delete the linked private folders on account delete.", "integrate-google-drive")}</p>
                </div>
            </div>

        </div>
    )
}