import * as React from 'react';
import cn from 'classnames/bind';
import Checkbox from 'components/checkbox/Checkbox';

import s from './ProfileList.module.scss';

interface IProfileListProps {
  children: React.ReactNode;
  color: string;
  onSelect?: () => void;
  selected?: boolean;
  noSelection?: boolean;
  noEdit?: boolean;
  totalCount?: number;
  headers: any;
}

export const ProfileList = ({
  children,
  color,
  onSelect,
  selected,
  noSelection = false,
  noEdit,
  totalCount,
  headers,
}: IProfileListProps) => {
  return (
    <div className={cn(s.profileList)}>
      <div className={s.profileList__header}>
        {!noSelection && !!onSelect && (
          <div className={s.profileList__checkbox}>
            <Checkbox
              radio
              color={color}
              name="selectall"
              checked={selected}
              onChange={() => onSelect()}
            />
          </div>
        )}
        <div className={cn(s.profileList__titles, { noSelection, noEdit })}>
          <div className={s.profileList__profiles}>
            {totalCount && `${headers.services} (${totalCount})`}
          </div>
          <div className={s.profileList__subscription}>{headers.rateplan}</div>
          <div className={s.profileList__total}>{headers.amount}</div>
        </div>
      </div>
      {React.Children.toArray(children).map((c) =>
        React.cloneElement(c as React.ReactElement<any>, { noSelection, noEdit }),
      )}
    </div>
  );
};