import * as React from 'react';
import SVGArrow from 'assets/svg/arrow.svg';
import classNames from 'classnames/bind';

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

const cn = classNames.bind(s);

interface IListItemsProps {
  children: React.ReactNode;
  imageUrl?: string;
  title?: string;
  color: string;
}

interface IListItemProps {
  itemLabel: string;
  itemText: string;
  onClick?: any;
  isOpen?: boolean;
  color?: string;
}

export const ListItem = ({
  itemLabel,
  itemText,
  onClick,
  isOpen,
  color = 'pink',
}: IListItemProps) => {
  return (
    <div className={cn(s.listItem, { clickable: onClick })} onClick={onClick || undefined}>
      <div className={s.listItem__wrapper}>
        <div>{itemLabel}</div>
        <div className={s.listItem__value}>{itemText}</div>
      </div>
      {onClick && (
        <div className={s.listItem__edit}>
          <SVGArrow className={cn(s.listItem__editSVG, `color-${color}`, { isOpen })} />
        </div>
      )}
    </div>
  );
};

export const ListItems = ({ imageUrl, children, title, color }: IListItemsProps) => {
  const deviceImage = () => {
    return imageUrl ? (
      <div className={cn('imageContainer')}>
        <img src={imageUrl} />
      </div>
    ) : null;
  };

  return (
    <div className={s.listItems}>
      {deviceImage()}
      <div className={s.listItems__list}>
        {title && <div className={s.listItems__title}>{title}</div>}
        {React.Children.toArray(children).map((c) =>
          React.cloneElement(c as React.ReactElement<any>, { color }),
        )}
      </div>
    </div>
  );
};