import { FilterButtonGroupsProps } from '@/entities/common/model/types';

export const FilterButtonGroups = ({
  title,
  activeValue,
  btnGroups,
  setter,
}: FilterButtonGroupsProps) => {

  const getBtns = () => {
    let rs = [];
    
    if(!!btnGroups && btnGroups.length > 0){
      console.log(' btnGroups.length : ',  btnGroups.length)
      let emptySpanCnt = 4 - (btnGroups.length % 4);
      let innerList = [];

      for(let i=0;i<btnGroups.length;i++){
        innerList.push(
          <span 
            key={ `key-btngroup-span-${i}` }
            className={ `keyword-tag flex-1 ${(activeValue === btnGroups[i]?.value)? 'active': ''}` }
            onClick={ () => setter(btnGroups[i]?.value || '') }
          >{ btnGroups[i]?.name }</span>
        );
        if((i % 4) === 3 ){
          rs.push(
            <div className="chip-row">{ innerList }</div>
          );
          innerList = [];
        }
      }
      if(emptySpanCnt > 0 && emptySpanCnt < 4){
        for(let i=0;i<emptySpanCnt;i++){
          innerList.push(
            <span 
              key={ `key-btngroup-span-nodata-${i}` }
              className="keyword-tag flex-1" 
              style={{ visibility: 'hidden' }}
            ></span>
          );
        }
        rs.push(
          <div className="chip-row">{ innerList }</div>
        );
      }
    }
    return rs;
  };
  return (
    <>
      <div className="opt-field">
        <div className="opt-label">{ title }</div>
        <div className="opt-controls col below h36">
        { getBtns() }
        </div>
      </div>
    </>
  );
};