import React from 'react';
import { SavedConfiguration } from '../../utils/configuration';
import { THREEKIT_PARAMS, urlApp, URL_POST_QUERY } from '../../utils/constants';
import { ArBtn } from '../ArBtn/ArBtn';
import SaveSvg from './../../assets/SaveSvg';
import s from './SavedConfig.module.scss';
import { SetModal } from '../../store/actions/Settings';
import { useStoreDispatch } from '../../App';
export const SavedConfig = ({ ...props }) => {
  const { disableAr = false } = props;
  const dispatch = useStoreDispatch();

  const onDropAHint = async () => {
    dispatch(SetModal({ list: { MailComponent: true } }));
    // console.log(activeSettingItems);
    // let dataRing = activeSettingItems.activeListElement.map((item: any) => {
    //   return {
    //     name: item[0]['name'],
    //     subName: item[0]['subName'],
    //   };
    // });
    // let saveConfig = await SavedConfiguration({
    //   ...THREEKIT_PARAMS,
    //   metadata: { ...paramsSaveConfiguration },
    // });
    // let saveUrl: string = `${urlApp}?&sku=${saveConfig['shortId']}`;
    // let imgPhoto = `https://preview.threekit.com/api/configurations/${saveConfig['shortId']}/thumbnail?bearer_token=${THREEKIT_PARAMS['authToken']}`;
    // let objConfig = await {
    //   type: 'DROP_A_HINT',
    //   data: {
    //     url: saveUrl,
    //     image: imgPhoto,
    //     listRing: dataRing,
    //   },
    // };
    // console.log(objConfig);
    // await window.parent.postMessage(JSON.stringify(objConfig), URL_POST_QUERY);
  };
  return (
    <div className={`${s.player_btn__wrapper} ${disableAr && s.disableAr}`}>
      {!disableAr && <ArBtn />}
      <div
        className={`${s.player_btn} ${s.desktop}`}
        onClick={() => onDropAHint()}
      >
        <span>Save configuration</span>
      </div>
      <div
        className={`${s.player_btn} ${s.mobile}`}
        onClick={() => onDropAHint()}
      >
        <SaveSvg />
        <span>Save</span>
      </div>
    </div>
  );
};