import {
  RtAchromatic,
  ColorsModificator,
  RtTheme,
} from '@dpa/react-frame-intro';

const state: { blue; green } = {
  blue: {
    theme: 'inherited',
    modificator: 'inherited',
    achromatic: 'inherited',
  },
  green: {
    theme: 'inherited',
    modificator: 'inherited',
    achromatic: 'inherited',
  },
};

const actions = {
  setRedWidth: (value: string) => {
    console.log(value);
    document.querySelector('#wrapper')!.style.width = `${value}px`;
  },

  setRedBackground: (value: string) => {
    console.log(value);
    document.querySelector('#red')!.style.background = `var(${value})`;
  },

  setRedColor: (value: string) => {
    console.log(value);
    document.querySelector('#red')!.style.color = `var(${value})`;
  },

  setBlueMod: (value: string) => {
    console.log(value);
    const block = document.querySelector('#blue')!;
    block.removeAttribute('class');
    state.blue.modificator = value.replace('rt-mode-', '') as ColorsModificator;
    block.classList.add(...getFrameColors({ ...state.blue }).split(' '));
  },

  setBlueTheme: (value: string) => {
    console.log(value);
    const block = document.querySelector('#blue')!;
    block.removeAttribute('class');
    state.blue.theme = value.replace('rt-theme-', '') as RtTheme;
    block.classList.add(...getFrameColors({ ...state.blue }).split(' '));
  },

  setBlueAchromatic: (value: string) => {
    console.log(value);
    const block = document.querySelector('#blue')!;
    block.removeAttribute('class');
    state.blue.achromatic = value.replace('rt-achr', '') as RtAchromatic;
    block.classList.add(...getFrameColors({ ...state.blue }).split(' '));
  },

  setGreenMod: (value: string) => {
    console.log(value);
    const block = document.querySelector('#green')!;
    block.removeAttribute('class');
    state.green.modificator = value.replace(
      'rt-mode-',
      ''
    ) as ColorsModificator;
    block.classList.add(...getFrameColors({ ...state.green }).split(' '));
  },

  setGreenTheme: (value: string) => {
    console.log(value);
    const block = document.querySelector('#green')!;
    block.removeAttribute('class');
    state.green.theme = value.replace('rt-theme-', '') as RtTheme;
    block.classList.add(...getFrameColors({ ...state.green }).split(' '));
  },

  setGreenAchromatic: (value: string) => {
    console.log(value);
    const block = document.querySelector('#green')!;
    block.removeAttribute('class');
    state.green.achromatic = value.replace('rt-achr-', '') as RtAchromatic;
    block.classList.add(...getFrameColors({ ...state.green }).split(' '));
  },
};

const onSelect = (e) => {
  const action = e.target.name;
  const value = e.target.value;
  actions[action](value);
};

document.addEventListener('change', onSelect);

const modValues = document.querySelectorAll('.select-values');
const modSelects = document.querySelectorAll('.select-modificator');
const themeSelects = document.querySelectorAll('.select-themes');
const achromSelects = document.querySelectorAll('.select-achromatics');

fillSelect(modValues, window.values);
fillSelect(modSelects, window.modificators);
fillSelect(themeSelects, window.themes);
fillSelect(achromSelects, window.achromatics);

setTimeout(() => {
  document.querySelector('select[name="setRedBackground"]')!.value =
    '--control-primary-enabled';
  document.querySelector('select[name="setRedColor"]')!.value =
    '--oncontrol-primary-default-enabled';
  onSelect({
    target: { name: 'setRedBackground', value: '--control-primary-enabled' },
  });
  onSelect({
    target: {
      name: 'setRedColor',
      value: '--oncontrol-primary-default-enabled',
    },
  });
}, 0);

function fillSelect(nodeList: NodeListOf<Element>, options: string[]) {
  nodeList.forEach((select) => {
    let htmlString = ``;
    for (const option of options) {
      htmlString += `<option name="${option}" selected="${option.includes(
        'inherited'
      )}">${option}</option>`;
    }
    select.innerHTML = htmlString;
  });
}