langDeviceHandler

const INPUT_TYPES = {
  FIELD: 'field',
  DROPDOWN: 'dropdown',
  TOGGLE: 'toggle',
  COLOR: 'color',
  CAROUSEL: 'carousel',
  IMAGE: 'image',
};
const OVERALL_INPUT = 'by_default';
const langs = [
  {
    value: 'fr',
  },
  {
    value: 'en',
  },
  {
    value: 'gr',
  },
];
const devs = [
  {
    value: 'kv',
  },
  {
    value: 'kh',
  },
  {
    value: 'ws',
  },
];
const answer = {
//   id: 1,
  name: 'form_item_1',
  form_item_id: 1,
  display_type: INPUT_TYPES.IMAGE,
  media_storage_item: {
    data: 'data',
  },
};

const setValueForAllAnswers = (answer, {lang, langs, device, devices}) => {
  let answers;
  switch (true) {
    case device === OVERALL_INPUT && lang !== OVERALL_INPUT:
    console.log('1')
      answers = devices.map((item) => ({...answer, language: lang, device: item.value}));
      break;

    case lang === OVERALL_INPUT && device !== OVERALL_INPUT:
    console.log('2')
      answers = langs.map((item) => ({...answer, language: item.value, device}));
      break;

    default:
    console.log('running')
      answers = [];
      langs.forEach(({value}) => {
        const allLangs = devices.map((item) => ({
          ...answer,
          language: value,
          screen_format: item.value,
        }));
        answers.push(...allLangs);
      });
      break;
  }
  return answers;
};

const oldAnswers = [
    {
    id: 1,
    name: 'form_item_2',
    form_item_id: 2,
    display_type: INPUT_TYPES.IMAGE,
    media_storage_item: { data: 'data' },
    language: 'fr',
    screen_format: 'kv'
  },
  {
    id: 2,
    name: 'form_item_2',
    form_item_id: 2,
    display_type: 'image',
    media_storage_item: { data: 'data' },
    language: 'fr',
    screen_format: 'kh'
  },
];
const newAnswers = setValueForAllAnswers(answer, {
  lang: OVERALL_INPUT,
  langs,
  device: OVERALL_INPUT,
  devices: devs,
});

// console.log(newAnswers);

const saveTemplateAnswer = (prevTemplateAnswers, value) => {
  if (Array.isArray(value)) {
      let filtered = [...prevTemplateAnswers];
      value.forEach((ans, idx) => {
        //   console.log('filtered: ', idx, filtered);
          filtered = filterTempalteAnswers(filtered, ans);
      });
      return [...filtered, ...value];
  } else {
    const filtered = filterTempalteAnswers(prevTemplateAnswers, value);
    return [...filtered, value];
  }
};

const arr = saveTemplateAnswer(oldAnswers, newAnswers);
console.log(arr);

function filterTempalteAnswers(items, value) {
    return items.filter((item) => {
      if (value.display_type === INPUT_TYPES.FIELD) {
        return item.form_item_id !== value.form_item_id ? item : item.language !== value.language;
      } else if (value.display_type === INPUT_TYPES.IMAGE) {
        return item.form_item_id !== value.form_item_id
          ? item
          : item.language !== value.language || item.screen_format !== value.screen_format;
      }
      return item.form_item_id !== value.form_item_id;
    });
}