/* eslint-disable */
import React from 'react';
import PropTypes from 'prop-types';
import {Panel, Placeholder, PanelHeader, Link, Footer, Separator, Div, Textarea,  Tabs, TabsItem, HorizontalScroll, HeaderButton, platform, IOS, PromoBanner, FixedLayout, Cell, Button, List, Avatar, Group} from '@vkontakte/vkui';
import Icon28ChevronBack from '@vkontakte/icons/dist/28/chevron_back';
import Icon24Back from '@vkontakte/icons/dist/24/back';
import Icon56RecentOutline from '@vkontakte/icons/dist/56/recent_outline';
import Icon24Send from '@vkontakte/icons/dist/24/send';
const promoBannerProps = {
  title: 'Заголовок',
  domain: 'vk.com',
  ctaText: 'Перейти',
  advertisingLabel: 'Реклама',
  iconLink: 'https://sun9-7.userapi.com/c846420/v846420985/1526c3/ISX7VF8NjZk.jpg',
  description: 'Описание рекламы',
  ageRestriction: 14
};
const osname = platform();
function openTab(url) {
    // Create link in memory
    let a = window.document.createElement("a");
    a.target = '_blank';
    a.href = url;

    // Dispatch fake click
    let e = window.document.createEvent("MouseEvents");
    e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
};

const Chat = ({ dark, light, chat_photo1, chat_photo2, chat_photo3, chat_photo4, chat_photo5, chat_photo6, chat_photo7, chat_photo8, chat_photo9, chat_photo10, chat_message1, chat_message2, chat_message3, chat_message4, chat_message5, chat_message6, chat_message7, chat_message8, chat_message9, chat_message10, chat_d1, chat_d2, chat_d3, chat_d4, chat_d5, chat_d6, chat_d7, chat_d8, chat_d9, chat_d10, chat_un1, chat_un2, chat_un3, chat_un4, chat_un5, chat_un6, chat_un7, chat_un8, chat_un9, chat_un10, chat_u1, chat_u2, chat_u3, chat_u4, chat_u5, chat_u6, chat_u7, chat_u8, chat_u9, chat_u10, calcChat, stageTimer, handleChatChange,  go }) => (
  <Panel id="chat">
    <PanelHeader
      left={<HeaderButton onClick={() => window.history.back()} >
        {osname === IOS ? <Icon28ChevronBack/> : <Icon24Back/>}
      </HeaderButton>}
    >
      Чат
    </PanelHeader>

       <Cell
       multiline
            size="l"
            indicator={<small>{chat_d10} </small>}
            before={<Avatar src={chat_photo10} size={40}></Avatar>}
          >
           <b>{chat_un10}</b>
           <br/ >
       <small>{chat_message10} </small>
                        </Cell>
                           <Cell multiline
            size="l"
            indicator={<small>{chat_d9} </small>}
            before={<Avatar src={chat_photo9} size={40}></Avatar>}
          >
          <b> {chat_un9} </b>
           <br/ >
          <small>{chat_message9} </small>
                        </Cell>
                           <Cell multiline
            size="l"
            indicator={<small>{chat_d8} </small>}
            before={<Avatar src={chat_photo8} size={40}></Avatar>}
          >
          <b> {chat_un8} </b>
           <br/ >
          <small> {chat_message8}</small>
                        </Cell>
                           <Cell multiline
            size="l"
            indicator={<small>{chat_d7} </small>}
            before={<Avatar src={chat_photo7} size={40}></Avatar>}
          >
           <b> {chat_un7} </b>
           <br/ >
           <small>{chat_message7} </small>
                        </Cell>
                           <Cell multiline
            size="l"
            indicator={<small>{chat_d6} </small>}
            before={<Avatar src={chat_photo6} size={40}></Avatar>}
          >
           <b>{chat_un6}</b>
           <br/ >
           <small>{chat_message6}</small>
                        </Cell>
                           <Cell multiline
            size="l"
            indicator={<small>{chat_d5} </small>}
            before={<Avatar src={chat_photo5} size={40}></Avatar>}
          >
           <b>{chat_un5}</b>
           <br/ >
           <small> {chat_message5} </small>
                        </Cell>
                           <Cell multiline
            size="l"
            indicator={<small>{chat_d4} </small>}
            before={<Avatar src={chat_photo4} size={40}></Avatar>}
          >
          <b> {chat_un4} </b>
           <br/ >
           < small>{chat_message4}</small>
                        </Cell>
                           <Cell multiline
            size="l"
            indicator={<small>{chat_d3} </small>}
            before={<Avatar src={chat_photo3} size={40}></Avatar>}
          >
           <b>{chat_un3}</b>
           <br/ >
          <small> {chat_message3}</small>
                        </Cell>
                           <Cell multiline
            size="l"
            indicator={<small>{chat_d2} </small>}
            before={<Avatar src={chat_photo2} size={40}></Avatar>}
          >
          <b> {chat_un2}</b>
           <br/ >
          <small> {chat_message2} </small>
                        </Cell>
              <Cell multiline
            size="l"
            indicator={<small>{chat_d1} </small>}
            before={<Avatar src={chat_photo1} size={40}></Avatar>}
          >
           <b>{chat_un1}</b>
           <br/ >
           < small>{chat_message1} </small>
                        </Cell>
    <FixedLayout vertical="bottom">
                <Group style={{ margin: 0, paddingBottom: 20 }}>
                    <Cell
                        asideContent={
                            <Button
                                level="secondary"
                                >
                                <Icon24Send />
                            </Button>

                        }
                    >
                        <Textarea
                            alignment="center"
                            placeholder="Введите Ваше сообщение..."
                        />
                    </Cell>
                     </Group>
            </FixedLayout>
  </Panel>
);
Chat.propTypes = {
  id: PropTypes.string.isRequired,
  go: PropTypes.func.isRequired,
};

export default Chat;