<script lang="ts">
    import { defineComponent, unref } from 'vue'

    import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue'

    import { useAppStore } from '/@/store/modules/app'
    import { usePermissionStore } from '/@/store/modules/permission'
    import { useMultipleTabStore } from '/@/store/modules/multipleTab'
    import { useUserStore } from '/@/store/modules/user'

    import { useDesign } from '/@/hooks/web/useDesign'
    import { useI18n } from '/@/hooks/web/useI18n'
    import { useMessage } from '/@/hooks/web/useMessage'
    import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'

    import { updateColorWeak } from '/@/logics/theme/updateColorWeak'
    import { updateGrayMode } from '/@/logics/theme/updateGrayMode'
    import defaultSetting from '/@/settings/projectSetting'

    export default defineComponent({
        name: 'SettingFooter',
        components: { CopyOutlined, RedoOutlined },
        setup() {
            const permissionStore = usePermissionStore()
            const { prefixCls } = useDesign('setting-footer')
            const { t } = useI18n()
            const { createSuccessModal, createMessage } = useMessage()
            const tabStore = useMultipleTabStore()
            const userStore = useUserStore()
            const appStore = useAppStore()

            function handleCopy() {
                const { isSuccessRef } = useCopyToClipboard(JSON.stringify(unref(appStore.getProjectConfig), null, 2))
                unref(isSuccessRef) &&
                    createSuccessModal({
                        title: t('layout.setting.operatingTitle'),
                        content: t('layout.setting.operatingContent'),
                    })
            }
            function handleResetSetting() {
                try {
                    appStore.setProjectConfig(defaultSetting)
                    const { colorWeak, grayMode } = defaultSetting
                    // updateTheme(themeColor);
                    updateColorWeak(colorWeak)
                    updateGrayMode(grayMode)
                    createMessage.success(t('layout.setting.resetSuccess'))
                } catch (error: any) {
                    createMessage.error(error)
                }
            }

            function handleClearAndRedo() {
                localStorage.clear()
                appStore.resetAllState()
                permissionStore.resetState()
                tabStore.resetState()
                userStore.resetState()
                location.reload()
            }
            return {
                prefixCls,
                t,
                handleCopy,
                handleResetSetting,
                handleClearAndRedo,
            }
        },
    })
</script>

<template>
    <div :class="prefixCls">
        <a-button type="primary" block @click="handleCopy">
            <CopyOutlined class="mr-2" />
            {{ t('layout.setting.copyBtn') }}
        </a-button>

        <a-button color="warning" block @click="handleResetSetting" class="my-3">
            <RedoOutlined class="mr-2" />
            {{ t('common.resetText') }}
        </a-button>

        <a-button color="error" block @click="handleClearAndRedo">
            <RedoOutlined class="mr-2" />
            {{ t('layout.setting.clearBtn') }}
        </a-button>
    </div>
</template>

<style lang="less" scoped>
    @prefix-cls: ~'@{namespace}-setting-footer';

    .@{prefix-cls} {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
