import React, { useEffect } from 'react';
import { AttributesT } from '../../../utils/constants';
import s from './LightBar.module.scss';
import productStyle from './../Product.module.scss';
import { useAttribute } from '@threekit-tools/treble/dist';
import { StandardItem } from '../../StandardItem/StandardItem';
import { useStoreDispatch, useStoreSelector } from '../../../App';
import { SetActiveItem } from '../../../store/actions/Settings';
import { getActualTitle, getProductParameters } from '../Product';
import { useLocation } from 'react-router-dom';
import { getActualPriceById } from '../../../store/selectors/selectors';
import { NoImage } from '../../../utils/helpFunctions';

export const LightBar = ({ ...props }) => {
  const name: AttributesT = props.name;
  const [attribute, setAttribute]: any = useAttribute(name);
  const attributeInfo = useStoreSelector(getActualPriceById);
  const NotImage = NoImage();

  return (
    <div
      className={productStyle.product__wrapper}
      style={{
        width: `${80 * attribute.values.length}px`,
      }}
    >
      {attribute &&
        attribute.values.map((item: any, index: number) => {
          const isAsset = attribute.type === 'Asset';
          let label = item.label;
          let priceInfo: any;

          if (isAsset && label !== 'None') {
            const id = item.metadata._id;
            priceInfo = attributeInfo[id];
          }
          const data = getProductParameters({
            item,
            attribute,
            setAttribute,
            priceInfo,
            NotImage,
            hintPosition: 'bottom',
            name,
          });

          return <StandardItem {...data} key={`${item.value}-${index}`} />;
        })}
    </div>
  );
};