import React from "react";

//strings

//actions

//components
import {ListItem} from "../../../Talk-ui-kit/src/list";
import Gap from "../../../Talk-ui-kit/src/gap";
import {Text} from "../../../Talk-ui-kit/src/typography";
import Container from "../../../Talk-ui-kit/src/container";
import {
  MdPerson,
  MdPersonOutline,
  MdOutlineAccountCircle,
  MdPhone,
  MdCreditCard,
  MdOutlinePersonPinCircle,
  MdOutlineEmail
} from "react-icons/md";

//styling
import style from "../../styles/utils/ghost.scss";

//statics

//functions

export default function ModalThreadInfoPersonHeadMoreInfo({moreInfoItems}){
  const isEmptyString = "---";
  const ICONS_MAP_STYLE = {size: style.iconSizeMd, color: style.colorGray};
  const ICONS_MAP =  {
    firstName: <MdPerson {...ICONS_MAP_STYLE}/>,
    lastName: <MdPersonOutline {...ICONS_MAP_STYLE}/>,
    username: <MdOutlineAccountCircle {...ICONS_MAP_STYLE}/>,
    email: <MdOutlineEmail {...ICONS_MAP_STYLE}/>,
    cellphoneNumber: <MdPhone {...ICONS_MAP_STYLE}/>,
    cardGroupName: <MdCreditCard {...ICONS_MAP_STYLE}/>,
    address: <MdOutlinePersonPinCircle {...ICONS_MAP_STYLE}/>,
  }
  const titles = Object.keys(ICONS_MAP);

  return(
    titles.map((item, index) =>
      <ListItem selection invert  key={index}>
        {item && <Container relative userSelect="text">
          {ICONS_MAP[item]}
          <Gap x={22}>
            <Text>{moreInfoItems[item] || isEmptyString}</Text>
          </Gap>
        </Container>}
      </ListItem>
    )
  )
}
