var notificationsDummy = [
    {
        author: 'Павел Иохин',
        avatarUrl: 'https://cp.bitrix.ru/upload/resize_cache/main/570/212_212_1/tmp.png',
        text: 'Напоминание о событии Отгул, 26.02.2020 отмеченного в Вашем календаре "Павел Иохин"',
        moreText: 'Посмотреть подробности',
        time: '01:45, 26 Февраля 2020'
    },
    {
        author: 'Павел Юрин',
        avatarUrl: 'https://cp.bitrix.ru/upload/resize_cache/main/f2a/212_212_1/P1066310.png',
        text: 'Мне нравится ваше сообщение "есть" в чате "Работа в выходные - калининградский офис"',
        moreText: '',
        time: '10:51, 24 Февраля 2020'
    },
    {
        author: 'Евгений Шеленков',
        avatarUrl: 'https://cp.bitrix.ru/upload/resize_cache/main/593/212_212_1/btr_1759.png',
        text: 'Мне нравится ваше сообщение "В пн 24-го на 5м кто-то будет?" в чате "Работа в выходные - калининградский офис"',
        moreText: '',
        time: '15:29, 21 Февраля 2020'
    },
    {
        author: 'Валерия Котанова',
        avatarUrl: 'https://cp.bitrix.ru/upload/resize_cache/main/6d3/212_212_1/%D1%84%D0%BE%D1%82%D0%BE%20%D0%B4%D0%BB%D1%8F%20%D0%B1%D0%B8%D1%82.png',
        text: 'Тикет №80108',
        moreText: '',
        subData: {
            title: 'Уведомления Mantis',
            icon: 'https://framalibre.org/sites/default/files/leslogos/mantis_logo_for_google_400x400.png',
            subtitle1: 'Открыть Mantis',
            subtitle2: 'Открыть Mantis из внешней сети',
            properties: [
                {
                    name: 'Проект',
                    value: 'Features',
                    direction: 'row'
                },
                {
                    name: 'Категория',
                    value: 'mobile',
                    direction: 'row'
                },
                {
                    name: 'Добавлено',
                    value: 'Теплякова Ольга',
                    direction: 'row'
                },
                {
                    name: 'Назначено',
                    value: 'Петриченко Евгений',
                    direction: 'row'
                },
                {
                    name: 'Статус',
                    value: 'новый',
                    direction: 'row'
                },
                {
                    name: 'Критичность',
                    value: 'нормальный',
                    direction: 'row'
                },
                {
                    name: 'Сводка',
                    value: 'б24: возможность открыть файл и просмотреть в событии календаря в мобильном приложеии',
                    direction: 'col'
                },
                {
                    separator: true
                },
                {
                    name: 'Тикеты',
                    value: '10-й тикет: imol|1437841',
                    direction: 'row'
                },
                {
                    name: 'Следить',
                    value: 'Котанова Валерия',
                    direction: 'row'
                },
            ]
        },
        time: 'Вчера, 23:00'
    },
]

var notifications = [
    ...notificationsDummy,
    ...notificationsDummy,
    ...notificationsDummy,
    ...notificationsDummy
]

var NotificationItemElement = (notification) => View(
    {
        style: {
            backgroundColor: '#ffffff'
        }
    },
    View(
        {
            style: {
                flexDirection: 'row',
                padding: 10
            }
        },
        Image(
            {
                uri: notification.avatarUrl,
                resizeMode: 'cover',
                style: {
                    width: 50,
                    height: 50,
                    marginRight: 10,
                    borderRadius: 25
                }
            }
        ),
        View(
            { style: { width: 150, flexGrow: 1 } },
            Text(
                {
                    text: notification.author,
                    style: {
                        color: '#000000',
                        fontWeight: 'bold',
                        fontSize: 14,
                        marginBottom: 5
                    }
                }
            ),
            Text(
                {
                    text: notification.text,
                    style: {
                        color: '#000000',
                        fontSize: 14,
                    }
                }
            ),
            notification.moreText ? Text(
                {
                    text: notification.moreText,
                    style: {
                        color: '#000099',
                        fontWeight: 'bold',
                        fontSize: 12,
                        marginTop: 2
                    }
                }
            ) : View({}),
            notification.subData ? SubDataElement(notification.subData) : View({}),
            Text(
                {
                    text: notification.time,
                    style: {
                        color: '#999999',
                        fontSize: 12,
                        marginTop: 2
                    }
                }
            )
        ),
        Button(
            {
                text: 'X',
                style: {
                    color: '#999999',
                    width: 20,
                    height: 20
                }
            }
        )
    ),
    View({ style: { height: 1, backgroundColor: '#cccccc' } })
)

var SubDataElement = (data) => View(
    {},
    View(
        { style: { flexDirection: 'row', marginTop: 5 } },
        View({ style: { width: 2, backgroundColor: '#000099' } }),
        View(
            { style: { paddingLeft: 10 } },
            View(
                { style: { flexDirection: 'row' } },
                Image(
                    {
                        uri: data.icon,
                        resizeMode: 'cover',
                        style: {
                            width: 30,
                            height: 30,
                            marginRight: 10,
                            borderRadius: 15
                        }
                    }
                ),
                Text(
                    {
                        text: data.title,
                        style: {
                            color: '#000000',
                            fontWeight: 'bold',
                            fontSize: 14,
                            marginBottom: 5
                        }
                    }
                ),
            ),
            Text(
                {
                    text: data.subtitle1,
                    style: {
                        color: '#000099',
                        fontWeight: 'bold',
                        fontSize: 12,
                        marginTop: 2
                    }
                }
            ),
            Text(
                {
                    text: data.subtitle2,
                    style: {
                        color: '#000099',
                        fontWeight: 'bold',
                        fontSize: 12,
                        marginTop: 2
                    }
                }
            ),
            View(
                { style: { height: 1, backgroundColor: '#999999', marginTop: 5 } }
            ),
            ...data.properties.map(property => property.separator ? View(
                { style: { height: 1, backgroundColor: '#999999', marginTop: 5 } }
            ) : View(
                {
                    style: {
                        flexDirection: property.direction === 'row' ? 'row': 'column',
                        //justifyContent: property.direction === 'row' ? 'space-between' : 'flex-start',
                        marginTop: 5,
                    },
                },
                Text(
                    {
                        text: property.name,
                        style: {
                            color: '#000000',
                            fontWeight: 'bold',
                            fontSize: 12,
                            width: 100
                        }
                    }
                ),
                Text(
                    {
                        text: property.value,
                        style: {
                            color: '#000000',
                            fontSize: 12,
                        }
                    }
                ),
            ))
        )
    )
)

class NotificationsComponent extends JNLayoutComponent {
    constructor() {
        super({ notifications: notifications })
    }

    render(state) {
        return ScrollView(
            { style: { backgroundColor: '#ffffff' } },
            View(
                {},
                ...state.notifications.map(notification => NotificationItemElement(notification))
            )
        )
    }
}

var notificationsComponent = new NotificationsComponent()