import React from 'react';
import { Modal } from 'antd';
import { ModalProps } from 'antd/lib/modal';

import styles from './style.less';

export interface ChoiceItem {
  key: string;
  value: string;
}

export interface ChoiceModal {
  data: ChoiceItem[],
  selectedKey: string;
  onItemSelected?: (key: string) => any;
}

const ChoiceModal: React.FC<ChoiceModal & ModalProps> = ({
  data,
  selectedKey,
  onItemSelected,
  ...props
}) => {
  const renderItem = (it: ChoiceItem) => (
    <div
      key={it.key}
      className={`${styles.item} ${it.key === selectedKey ? styles.active : ''}`}
      onClick={() => { onItemSelected && onItemSelected(it.key); }}
    >
      {it.value}
    </div>
  );

  return (
    <Modal
      {...props}
      footer={null}
    >
      <div className={styles.list}>
        {data.map(renderItem)}
      </div>
    </Modal>
  )
};

export default ChoiceModal;
