
<template>
  <div class="fotkipress-directory-settings">
    <div class="header">
      <h4>Directory settings</h4>
    </div>

    <div v-if="loading" class="content">
      <div class="loader-wrapper">
        <div class="fotkipress-loader"></div>
      </div>
    </div>

    <div v-if="!loading" class="content">
      <label class="fotkipress-switch" for="settingsPublicDirectory" v-if="!settingsPublicSubdirectory">
        <input type="checkbox" id="settingsPublicDirectory" name="settingsPublicDirectory" v-model="settingsPublicDirectory">
        <span class="slider"></span>
        <span class="text">public directory</span>
      </label>

      <label class="fotkipress-switch" for="settingsPublicSubdirectory" v-if="settingsPublicSubdirectory">
        <input type="checkbox" id="settingsPublicSubdirectory" name="settingsPublicSubdirectory" checked disabled>
        <span class="slider"></span>
        <span class="text">public subdirectory directory</span>
      </label>
    </div>
  </div>
</template>

<script>
import API from './../../api';


export default {
    props: {
        path: {
            type: String,
            required: true
        }
    },

    data() {
        return {
            loading: true,
            settingsPublicDirectory: false,
            settingsPublicSubdirectory: false
        };
    },

    created() {
        this.loadDirectorySettings();
    },

    watch: {
        path() {
            this.loadDirectorySettings();
        },

        settingsPublicDirectory(newValue) {
            API.saveDirectorySettings({
                path: this.path,
                public: newValue
            });
        }
    },

    methods: {
        loadDirectorySettings() {
            this.loading = true;

            API.getDirectorySettings(this.path).then((res) => {
                if (res.success) {
                    this.settingsPublicDirectory = res.data.public;
                    this.settingsPublicSubdirectory = res.data.publicSubdirectory;
                }

                this.loading = false;
            });
        }
    }
}
</script>
