import BooleanSetting from '../helpers/boolean_setting.vue'
import ChoiceSetting from '../helpers/choice_setting.vue'
import IntegerSetting from '../helpers/integer_setting.vue'
import FloatSetting from '../helpers/float_setting.vue'
import UnitSetting from '../helpers/unit_setting.vue'
import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
import Preview from './old_theme_tab/theme_preview.vue'

import { newImporter } from 'src/services/export_import/export_import.js'
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
import { init } from 'src/services/theme_data/theme_data_3.service.js'
import {
  getCssRules
} from 'src/services/theme_data/css_utils.js'
import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js'
import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'

import SharedComputedObject from '../helpers/shared_computed_object.js'
import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'

import { mapActions } from 'pinia'
import { useInterfaceStore, normalizeThemeData } from 'src/stores/interface'

const AppearanceTab = {
  data () {
    return {
      availableThemesV3: [],
      availableThemesV2: [],
      bundledPalettes: [],
      compilationCache: {},
      fileImporter: newImporter({
        accept: '.json, .iss',
        validator: this.importValidator,
        onImport: this.onImport,
        parser: this.importParser,
        onImportFailure: this.onImportFailure
      }),
      palettesKeys: [
        'bg',
        'fg',
        'link',
        'text',
        'cRed',
        'cGreen',
        'cBlue',
        'cOrange'
      ],
      userPalette: {},
      intersectionObserver: null,
      forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
        key: mode,
        value: i - 1,
        label: this.$t(`settings.style.themes3.hacks.forced_roundness_mode_${mode}`)
      })),
      underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode) => ({
        key: mode,
        value: mode,
        label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
      })),
      backgroundUploading: false,
      background: null,
      backgroundPreview: null,
    }
  },
  components: {
    BooleanSetting,
    ChoiceSetting,
    IntegerSetting,
    FloatSetting,
    UnitSetting,
    ProfileSettingIndicator,
    Preview,
    PaletteEditor
  },
  mounted () {
    useInterfaceStore().getThemeData()

    const updateIndex = (resource) => {
      const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
      const currentIndex = this.$store.state.instance[`${resource}sIndex`]

      let promise
      if (currentIndex) {
        promise = Promise.resolve(currentIndex)
      } else {
        promise = useInterfaceStore()[`fetch${capitalizedResource}sIndex`]()
      }

      return promise.then(index => {
        return Object
          .entries(index)
          .map(([k, func]) => [k, func()])
      })
    }

    updateIndex('style').then(styles => {
      styles.forEach(([key, stylePromise]) => stylePromise.then(data => {
        const meta = data.find(x => x.component === '@meta')
        this.availableThemesV3.push({ key, data, name: meta.directives.name, version: 'v3' })
      }))
    })

    updateIndex('theme').then(themes => {
      themes.forEach(([key, themePromise]) => themePromise.then(data => {
        if (!data) {
          console.warn(`Theme with key ${key} is empty or malformed`)
        } else if (Array.isArray(data)) {
          console.warn(`Theme with key ${key} is a v1 theme and should be moved to static/palettes/index.json`)
        } else if (!data.source && !data.theme) {
          console.warn(`Theme with key ${key} is malformed`)
        } else {
          this.availableThemesV2.push({ key, data, name: data.name, version: 'v2' })
        }
      }))
    })

    this.userPalette = useInterfaceStore().paletteDataUsed || {}

    updateIndex('palette').then(bundledPalettes => {
      bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
        let palette
        if (Array.isArray(v)) {
          const [
            name,
            bg,
            fg,
            text,
            link,
            cRed = '#FF0000',
            cGreen = '#00FF00',
            cBlue = '#0000FF',
            cOrange = '#E3FF00'
          ] = v
          palette = { key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
        } else {
          palette = { key, ...v }
        }
        if (!palette.key.startsWith('style.')) {
          this.bundledPalettes.push(palette)
        }
      }))
    })

    this.previewTheme('stock', 'v3')

    if (window.IntersectionObserver) {
      this.intersectionObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(({ target, isIntersecting }) => {
          if (!isIntersecting) return
          const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
          this.$nextTick(() => {
            if (theme) this.previewTheme(theme.key, theme.version, theme.data)
          })
          observer.unobserve(target)
        })
      }, {
        root: this.$refs.themeList
      })
    } else {
      this.availableStyles.forEach(theme => this.previewTheme(theme.key, theme.version, theme.data))
    }
  },
  updated () {
    this.$nextTick(() => {
      this.$refs.themeList.querySelectorAll('.theme-preview').forEach(node => {
        this.intersectionObserver.observe(node)
      })
    })
  },
  watch: {
    paletteDataUsed () {
      this.userPalette = this.paletteDataUsed || {}
    }
  },
  computed: {
    isDefaultBackground () {
      return !(this.$store.state.users.currentUser.background_image)
    },
    switchInProgress () {
      return useInterfaceStore().themeChangeInProgress
    },
    paletteDataUsed () {
      return useInterfaceStore().paletteDataUsed
    },
    availableStyles () {
      return [
        ...this.availableThemesV3,
        ...this.availableThemesV2
      ]
    },
    availablePalettes () {
      return [
        ...this.bundledPalettes,
        ...this.stylePalettes
      ]
    },
    stylePalettes () {
      const ruleset = useInterfaceStore().styleDataUsed || []
      if (!ruleset && ruleset.length === 0) return
      const meta = ruleset.find(x => x.component === '@meta')
      const result = ruleset.filter(x => x.component.startsWith('@palette'))
        .map(x => {
          const { variant, directives } = x
          const {
            bg,
            fg,
            text,
            link,
            accent,
            cRed,
            cBlue,
            cGreen,
            cOrange,
            wallpaper
          } = directives

          const result = {
            name: `${meta.directives.name || this.$t('settings.style.themes3.palette.imported')}: ${variant}`,
            key: `style.${variant.toLowerCase().replace(/ /g, '_')}`,
            bg,
            fg,
            text,
            link,
            accent,
            cRed,
            cBlue,
            cGreen,
            cOrange,
            wallpaper
          }
          return Object.fromEntries(Object.entries(result).filter(([, v]) => v))
        })
      return result
    },
    noIntersectionObserver () {
      return !window.IntersectionObserver
    },
    instanceWallpaperUsed () {
      return this.$store.state.instance.background &&
        !this.$store.state.users.currentUser.background_image
    },
    customThemeVersion () {
      const { themeVersion } = useInterfaceStore()
      return themeVersion
    },
    isCustomThemeUsed () {
      const { customTheme, customThemeSource } = this.mergedConfig
      return customTheme != null || customThemeSource != null
    },
    isCustomStyleUsed () {
      const { styleCustomData } = this.mergedConfig
      return styleCustomData != null
    },
    ...SharedComputedObject()
  },
  methods: {
    importFile () {
      this.fileImporter.importData()
    },
    importParser (file, filename) {
      if (filename.endsWith('.json')) {
        return JSON.parse(file)
      } else if (filename.endsWith('.iss')) {
        return deserialize(file)
      }
    },
    onImport (parsed, filename) {
      if (filename.endsWith('.json')) {
        useInterfaceStore().setThemeCustom(parsed.source || parsed.theme)
      } else if (filename.endsWith('.iss')) {
        useInterfaceStore().setStyleCustom(parsed)
      }
    },
    onImportFailure (result) {
      console.error('Failure importing theme:', result)
      useInterfaceStore().pushGlobalNotice({ messageKey: 'settings.invalid_theme_imported', level: 'error' })
    },
    importValidator (parsed, filename) {
      if (filename.endsWith('.json')) {
        const version = parsed._pleroma_theme_version
        return version >= 1 || version <= 2
      } else if (filename.endsWith('.iss')) {
        if (!Array.isArray(parsed)) return false
        if (parsed.length < 1) return false
        if (parsed.find(x => x.component === '@meta') == null) return false
        return true
      }
    },
    isThemeActive (key) {
      return key === (this.mergedConfig.theme || this.$store.state.instance.theme)
    },
    isStyleActive (key) {
      return key === (this.mergedConfig.style || this.$store.state.instance.style)
    },
    isPaletteActive (key) {
      return key === (this.mergedConfig.palette || this.$store.state.instance.palette)
    },
    ...mapActions(useInterfaceStore, [
      'setStyle',
      'setTheme'
    ]),
    setPalette (name, data) {
      useInterfaceStore().setPalette(name)
      this.userPalette = data
    },
    setPaletteCustom (data) {
      useInterfaceStore().setPaletteCustom(data)
      this.userPalette = data
    },
    resetTheming () {
      useInterfaceStore().setStyle('stock')
    },
    previewTheme (key, version, input) {
      let theme3
      if (this.compilationCache[key]) {
        theme3 = this.compilationCache[key]
      } else if (input) {
        if (version === 'v2') {
          const style = normalizeThemeData(input)
          const theme2 = convertTheme2To3(style)
          theme3 = init({
            inputRuleset: theme2,
            ultimateBackgroundColor: '#000000',
            liteMode: true,
            debug: true,
            onlyNormalState: true
          })
        } else if (version === 'v3') {
          const palette = input.find(x => x.component === '@palette')
          let paletteRule
          if (palette) {
            const { directives } = palette
            directives.link = directives.link || directives.accent
            directives.accent = directives.accent || directives.link
            paletteRule = {
              component: 'Root',
              directives: Object.fromEntries(
                Object
                  .entries(directives)
                  .filter(([k]) => k && k !== 'name')
                  .map(([k, v]) => ['--' + k, 'color | ' + v])
              )
            }
          } else {
            paletteRule = null
          }

          theme3 = init({
            inputRuleset: [...input, paletteRule].filter(x => x),
            ultimateBackgroundColor: '#000000',
            liteMode: true,
            onlyNormalState: true
          })
        }
      } else {
        theme3 = init({
          inputRuleset: [],
          ultimateBackgroundColor: '#000000',
          liteMode: true,
          onlyNormalState: true
        })
      }

      if (!this.compilationCache[key]) {
        this.compilationCache[key] = theme3
      }


      const sheet = createStyleSheet('appearance-tab-previews', 90)
      sheet.addRule([
        '#theme-preview-', key, ' {\n',
        getCssRules(theme3.eager).join('\n'),
        '\n}'
      ].join(''))
      sheet.ready = true
      adoptStyleSheets()
    },
    uploadFile (slot, e) {
      const file = e.target.files[0]
      if (!file) { return }
      if (file.size > this.$store.state.instance[slot + 'limit']) {
        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
        useInterfaceStore().pushGlobalNotice({
          messageKey: 'upload.error.message',
          messageArgs: [
            this.$t('upload.error.file_too_big', {
              filesize: filesize.num,
              filesizeunit: filesize.unit,
              allowedsize: allowedsize.num,
              allowedsizeunit: allowedsize.unit
            })
          ],
          level: 'error'
        })
        return
      }

      const reader = new FileReader()
      reader.onload = ({ target }) => {
        const img = target.result
        this[slot + 'Preview'] = img
        this[slot] = file
      }
      reader.readAsDataURL(file)
    },
    resetBackground () {
      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
      if (confirmed) {
        this.submitBackground('')
      }
    },
    submitBackground (background) {
      if (!this.backgroundPreview && background !== '') { return }

      this.backgroundUploading = true
      this.$store.state.api.backendInteractor.updateProfileImages({ background })
        .then((data) => {
          this.$store.commit('addNewUsers', [data])
          this.$store.commit('setCurrentUser', data)
          this.backgroundPreview = null
        })
        .catch(this.displayUploadError)
        .finally(() => { this.backgroundUploading = false })
    },
  }
}

export default AppearanceTab