<template>
  <div>
    <v-btn text color="success" @click="dialog = true"> New </v-btn>
    <v-dialog v-model="dialog" width="400">
      <v-card>
        <v-card-title> Add a New Theme </v-card-title>
        <v-card-text>
          <v-text-field
            label="Theme Name"
            v-model="themeName"
            :rules="[rules.required]"
          ></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="grey" text @click="dialog = false"> Cancel </v-btn>
          <v-btn color="success" text @click="Select" :disabled="!themeName">
            Create
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  props: {
    buttonText: String,
    value: String
  },
  data() {
    return {
      dialog: false,
      themeName: "",
      rules: {
        required: val => !!val || "Required."
      }
    };
  },

  watch: {
    color() {
      this.updateColor();
    }
  },
  methods: {
    randomColor() {
      return "#" + Math.floor(Math.random() * 16777215).toString(16);
    },
    Select() {
      const newTheme = {
        name: this.themeName,
        colors: {
          primary: this.randomColor(),
          accent: this.randomColor(),
          secondary: this.randomColor(),
          success: this.randomColor(),
          info: this.randomColor(),
          warning: this.randomColor(),
          error: this.randomColor()
        }
      };

      this.$emit("new-theme", newTheme);
      this.dialog = false;
    }
  }
};
</script>

<style>
</style>