import React, { useEffect } from 'react';
import { AttributesT } from '../../../utils/constants';
import s from './FrontBumper.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 FrontBumper = ({ ...props }) => {
  const name: AttributesT = props.name;
  const [attribute, setAttribute]: any = useAttribute(name);
  const attributeInfo = useStoreSelector(getActualPriceById);
  const NotImage = NoImage();
  let sortAttr = attribute.values;

  sortAttr.sort(function (a: any, b: any) {
    if (b.label === 'None') {
      return 1;
    } else {
      return -1;
    }
  });

  return (
    <div
      className={productStyle.product__wrapper}
      style={{
        width: `${80 * attribute.values.length}px`,
      }}
    >
      {sortAttr.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,
          hintPosition: 'bottom',
          name,
          NotImage,
        });

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