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

export const FilterButtonGroups = ({
  title,
  activeValue,
  btnGroups,
  setter,
  addClassName,
  maxBtn
}: FilterButtonGroupsProps) => {
  const onwRowMaxBtn: 2 | 4 = maxBtn || 4;
  const getBtns = () => {
    let rs = [];
    
    if(!!btnGroups && btnGroups.length > 0){
      let emptySpanCnt = onwRowMaxBtn - (btnGroups.length % onwRowMaxBtn);
      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': ''}` }
            style={{ 
              width: `calc((100% - ${onwRowMaxBtn === 2? '10px': '30px'}) / ${onwRowMaxBtn})`,
              wordBreak: 'break-all',
              fontSize: 'var(--fs-13)'
            }}
            onClick={ () => setter(btnGroups[i]?.value || '') }
          >{ btnGroups[i]?.name }</span>
        );
        if((i % onwRowMaxBtn) === (onwRowMaxBtn - 1) ){
          rs.push(
            <div 
              key={ `key-btngroup-chip-row-${i}` }
              className="chip-row"
            >{ innerList }</div>
          );
          innerList = [];
        }
      }
      if(emptySpanCnt > 0 && emptySpanCnt < onwRowMaxBtn){
        for(let i=0;i<emptySpanCnt;i++){
          innerList.push(
            <span 
              key={ `key-btngroup-span-nodata-${i}` }
              className="keyword-tag flex-1" 
              style={{ 
                visibility: 'hidden', 
                width: `calc((100% - ${onwRowMaxBtn === 2? '10px': '30px'}) / ${onwRowMaxBtn})`,
                wordBreak: 'break-all',
                fontSize: 'var(--fs-13)'
              }}
            ></span>
          );
        }
        rs.push(
          <div 
            key={ `key-btngroup-chip-row-nodata` }
            className="chip-row"
          >{ innerList }</div>
        );
      }
    }
    return rs;
  };
  return (
    <>
      <div className={ `opt-field ${addClassName || ''}` }>
        <div 
          className="opt-label"
          style={{ fontSize: 'var(--fs-14)' }}
        >{ title }</div>
        <div className={ `opt-controls col h36 ${(onwRowMaxBtn === 4)? 'below': ''}` }>
        { getBtns() }
        </div>
      </div>
    </>
  );
};