import React, { Component } from 'react';
import TableUsersView from './table.view';

const { TableSection,
        SearchForm,
        SearchInput,
        Table,
        Title,
        TitleList,
        TitleItem,
        Users,
        User,
        Item,
        ItemButton } = TableUsersView;

const fields = [
   { name: "Активность", value: "isActive" },
   { name: "ID", value: "id"},
   { name: "Имя", value: "name"},
   { name: "Телефон", value: "phone" },
   { name: "Email", value: "email" },
   { name: "Бонусы", value: "bonuses"},
   { name: "Дата рождения", value: "birthDate"},
   { name: "Промокод", value: "referralId"},
   { name: "Промокод использ.", value: "referralId" },
   { name: "Детально", value: "" },
];
 const users = [
    {
    "id": 16,
    "name": "Марина ",
    "phone": "111111111111",
    "email": "test@ukr.net",
    "bonuses": 50,
    "birthDate": "1999-09-09T23:00:00.000Z",
    "referralId": null,
  },
  {
    "id": 28,
    "name": "Алёна",
    "phone": "111111111111",
    "email": "test@ukr.net",
    "bonuses": 50,
    "birthDate": "1999-09-09T23:00:00.000Z",
    "referralId": null,
  },
  {
    "id": 1,
    "name": "TestUser",
    "phone": "111111111111",
    "email": "test@ukr.net",
    "bonuses": 50,
    "birthDate": "1999-09-09T23:00:00.000Z",
    "referralId": null,
  },
  {
    "id": 17,
    "name": "Дария",
    "phone": "111111111111",
    "email": "test@ukr.net",
    "bonuses": 50,
    "birthDate": "1999-09-09T23:00:00.000Z",
    "referralId": null,
  }
 ];

export default class TableOfUsers extends Component {

   render() {
      return (
         <TableSection>
               <Table>

                  <Title>
                     <TitleList>
                        { fields.map((items) => {
                           return (
                               <TitleItem key={items.value}>{items.name}</TitleItem>
                           )}
                        )}
                     </TitleList>
                  </Title>

                  <Users>
                     { this.props.UsersData.map((user, idx) => {
                        return (
                           <User key={idx}>
                              { fields.map((cell) => {
                                return (
                                 <Item key={cell.value}>{user[cell.value]}</Item>
                                 )}
                               )}
                           </User>
                        )}
                     )}
                  </Users>

                  </Table>
         </TableSection>
      );
    };
  }