import React from 'react';
import { useLocation } from 'react-router-dom';
import { useStoreSelector } from '../../App';
import { getConfigInfo } from '../../store/selectors/selectors';
import s from './ColorItem.module.scss';
export const ColorItem = ({ ...props }) => {
  const {
    bg = '#ccc',
    changeItem,
    item,
    currentValue,
    name,
    isUrlLoaderActive,
  } = props;
  let value: any;
  const search = useLocation().search;
  const attributeInfoCustom = useStoreSelector(getConfigInfo).attributeIsActive;
  let attributeIsActive = attributeInfoCustom && attributeInfoCustom[name];

  if (attributeIsActive && isUrlLoaderActive) {
    value = item.metadata.option;
  } else {
    value = item.assetId;
  }
  return (
    <div
      style={{ background: bg }}
      onClick={() => changeItem(item.assetId, item.label)}
      className={`${s.colorItem} ${currentValue === value ? s.active : null}`}
    ></div>
  );
};