<script setup lang="ts">
interface Settings {
  hasFrontlight: boolean;
  displayColors: string;
  customize: boolean,
}

const emit = defineEmits(['update:settings']);
const localSettings = reactive<Settings>({
  customize: false,
  hasFrontlight: false,
  displayColors: 'black-on-white'
});

const updateSettings = () => {
  emit('update:settings', { ...toRaw(localSettings) });
};
</script>

<template>
  <div class="card bg-base-100 shadow-xl">
    <div class="card-body">
      <div class="">
        <div class="flex justify-between items-center">
        <h2 class="card-title">Customize settings</h2>
        <div class="form-control">
          <label class="label cursor-pointer p-0">
            <span class="label-text">Enable</span>
            &nbsp;
            <input type="checkbox" v-model="localSettings.customize" class="checkbox" />
          </label>
        </div>
      </div>

      </div>
      <div role="alert" class="alert alert-info">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span class="text-xs">If you customize settings, all existing settings including WiFi credentials will be overwritten. This is only
          recommended for initial flashing.</span>
      </div>
      <div class="space-y-4 mt-4">
        <div class="form-control">
          <label class="label cursor-pointer">
            <span class="label-text">Has Frontlight <small>Only Rev. B</small></span>
            <input type="checkbox" class="toggle toggle-primary" :disabled="!localSettings.customize"
              v-model="localSettings.hasFrontlight" @change="updateSettings" />
          </label>
        </div>

        <div class="form-control">
          <label class="label">
            <span class="label-text">Display options</span>
          </label>
          <div class="space-y-2 ml-2">
            <label class="label cursor-pointer">
              <span class="label-text">White text on Black background</span>
              <input type="radio" name="display-colors" class="radio radio-primary" value="white-on-black"
                v-model="localSettings.displayColors" :disabled="!localSettings.customize" @change="updateSettings" />
            </label>
            <label class="label cursor-pointer">
              <span class="label-text">Black text on White background</span>
              <input type="radio" name="display-colors" class="radio radio-primary" value="black-on-white"
                :disabled="!localSettings.customize" v-model="localSettings.displayColors" @change="updateSettings" />
            </label>
          </div>
        </div>
      </div>
     

    </div>
  </div>
</template>