export interface AppState {}

export interface AppState {
    title: string;
    backendAddress: string;
    isLoading: boolean;
    group?: Group;
    loadData: Function;
}

/**
* Общее состояние приложения
* @prop title - заголовок приложения
* @prop backendAddress - адрес сервера
* @prop isLoading - флаг загрузки данных (true - загружаются, false - загружены)
* @prop group - данные об отображаемой группе. На момент загрузки данных group не определена
* @method loadData - метод загрузки данных
*/
export interface AppState {
    title: string;
    backendAddress: string;
    isLoading: boolean;
    group?: Group;
    loadData: Function;
}

/**
* Общее состояние приложения
* @prop title - заголовок приложения
* @prop backendAddress - адрес сервера
* @prop isLoading - флаг загрузки данных (true - загружаются, false - загружены)
* @prop group - данные об отображаемой группе. На момент загрузки данных group не определена
* @method loadData - метод загрузки данных
*/
export interface AppState {
    title: string;
    backendAddress: string;
    isLoading: boolean;
    group?: Group;
    loadData: Function;
}
/**
* Данные об отображаемой группе
*/
//TODO
export interface Group {
}

/**
* Общее состояние приложения
* @prop title - заголовок приложения
* @prop backendAddress - адрес сервера
* @prop isLoading - флаг загрузки данных (true - загружаются, false - загружены)
* @prop group - данные об отображаемой группе. На момент загрузки данных group не определена
* @method loadData - метод загрузки данных
*/
export interface AppState {
    title: string;
    backendAddress: string;
    isLoading: boolean;
    group?: Group;
    loadData: Function;
}
//Пример 1
const appState1: AppState = {
    title: "Заголовок 1",
    backendAddress: "/view_doc.html",
    isLoading: true,
    group: undefined,
    loadData: () => {}
}
//Пример 2
const appState2: AppState = {
    title: "Заголовок 2",
    backendAddress: "/view_doc_2.html",
    isLoading: false,
    group: group1, //Заглушка для вложенной структуры
    loadData: () => {}
}
/**
* Данные об отображаемой группе
*/
//TODO
export interface Group {
}
//TODO
const group1 = {}

export default abstract class AbstractService {
    /**
     * Метод загрузки данных о группе с сервера
     * @fires get_group_data - имя действия, вызываемого на сервере
     * @returns данные о группе
     */
    abstract getGroupData(): Promise<Group>;
}

export const getWorkDuration = (worktimeFrom: string, worktimeTo: string): string => {
    return "6ч 18мин";
}

const componentName = (props: PropsType) => { return <h1>componentName</h1> }

class componentName extends React.Component<PropsType, StateType>{
    state = {
        //произвольные значения для всех обязательных свойств состояния
    }
    render() {
        return <h1>componentName</h1>
    }
}

interface AppProps {}
export default class App extends Component<AppProps, AppState> {
    state = {
        title: "Отображение списка групп",
        backendAddress: "",
        isLoading: true,
        loadData: this.loadData.bind(this)
    }
    /**
     * Метод загрузки данных с сервера
     */
    //TODO
    loadData() {
    }
    render() {
        return <h1>App</h1>
    }
}

/**
* Рассчитывает количество часов и минут между указанным начальным и конечным временем
* Если время начала работы больше времени конца, то считается, что конечное время - это время следующих суток
* @param worktimeFrom - время начала работы в формате ЧЧ:ММ (от 00:00 до 23:59)
* @param worktimeTo - время конца работы в формате ЧЧ:ММ (от 00:00 до 23:59)
* @return количество часов и минут между переданным временем в формате Хч Y?мин, например 6ч 18мин или 5ч, если количество часов полное
*/
//TODO
export const getWorkDuration = (worktimeFrom: string, worktimeTo: string): string => {
    return "6ч 18мин";
}

type TrafficLights = "красный" | "желтый" | "зеленый";

function trafficLightsFunction (trafficLights: TrafficLights) {
    switch (trafficLights) {
        case "красный":
            ...
        case "желтый":
            ...
        case "зеленый":
            ...
    }
}

/**
* Рассчитывает количество часов и минут между указанным начальным и конечным временем
* Если время начала работы больше времени конца, то считается, что конечное время - это время следующих суток
* @param worktimeFrom - время начала работы в формате ЧЧ:ММ (от 00:00 до 23:59)
* @param worktimeTo - время конца работы в формате ЧЧ:ММ (от 00:00 до 23:59)
* @return количество часов и минут между переданным временем в формате Хч Y?мин, например 6ч 18мин или 5ч, если количество часов полное
*/
//TODO
export const getWorkDuration = (worktimeFrom: string, worktimeTo: string): string => {
    return "6ч 18мин";
}

describe('Тестирование расчёта времени между началом и концом работы', () => {
    it('Когда начало и конец смены совпадают, функция возвращает 0ч', ()=>{
        const result = getWorkDuration("01:32", "01:32");
        expect(result).toBe("0ч");
    });
    //Подобным образом описываем все сценарии
    ...
});

interface AppProps {}
export default class App extends Component<AppProps, AppState> {
    state = {
        title: "Отображение списка групп",
        backendAddress: "",
        isLoading: true,
        loadData: this.loadData.bind(this)
    }
    /**
     * Метод загрузки данных с сервера
     */
    //TODO
    loadData() {
    }
    render() {
        return <h1>App</h1>
    }
}

/**
* Общее состояние приложения
* @prop title - заголовок приложения
* @prop backendAddress - адрес сервера
* @prop isLoading - флаг загрузки данных (true - загружаются, false - загружены)
* @prop group - данные об отображаемой группе. На момент загрузки данных group не определена
* @method loadData - метод загрузки данных
*/
export interface AppState {
    title: string;
    backendAddress: string;
    isLoading: boolean;
    group?: Group;
    loadData: Function;
}

import React from 'react';
import Enzyme, { mount, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
import App from './App';
describe('App', () => {
    test('Когда компонент App смонтирован, вызывается функция loadData', () => {
        //Добавляем слушателя к функции loadData
        const loadData = jest.spyOn(App.prototype, 'loadData');
        //Монтируем компонент
        const wrapper = mount(<App></App>);
        //Проверяем количество вызовов функции loadData
        expect(loadData.mock.calls.length).toBe(1);
    });
}

test('Когда данные загружаются, отображаются только заголовок и спиннер', () => {
        //Монтируем компонент
        const wrapper = mount(<App></App>);
        //Подменяем состояние компонента на нужное для тестирования
        wrapper.setState({
            title: "Заголовок 1",
            backendAddress: "/view_doc.html",
            isLoading: true,
            group: undefined,
            loadData: () => {}
        })
        //Проверяем правильность отображения компонента
        //Проверяем наличие и содержание заголовка
        expect(wrapper.find('h1').length).toBe(1);
        expect(wrapper.find('h1').text()).toBe("Заголовок 1");
        //Заглушка, отображающаяся в процессе загрузки
        expect(wrapper.find(Spinner).length).toBe(1);
        //Компонент, отображающий группу отображаться не должен
        expect(wrapper.find(Group).length).toBe(0);
    });

test('Когда данные загружены, отображается заголовок и группа. Спиннер не отображается', () => {
        const wrapper = mount(<App></App>);
        wrapper.setState({
            title: "Заголовок 2",
            backendAddress: "/view_doc_2.html",
            isLoading: false,
            group: {
                id: "1",
                name: "Группа 1",
                listOfCollaborators: []
            },
            loadData: () => {}
        })
        expect(wrapper.find('h1').length).toBe(1);
        expect(wrapper.find('h1').text()).toBe("Заголовок 2");
        expect(wrapper.find(Spinner).length).toBe(0);
        expect(wrapper.find(Group).length).toBe(1);
    });

/**
* Рассчитывает количество часов и минут между указанным начальным и конечным временем
* Если время начала работы больше времени конца, то считается, что конечное время - это время следующих суток
* @param worktimeFrom - время начала работы в формате ЧЧ:ММ (от 00:00 до 23:59)
* @param worktimeTo - время конца работы в формате ЧЧ:ММ (от 00:00 до 23:59)
* @return количество часов и минут между переданным временем в формате Хч Y?мин, например 6ч 18мин или 5ч, если количество часов полное
*/
//TODO
export const getWorkDuration = (worktimeFrom: string, worktimeTo: string): string => {
    return "6ч 18мин";
}

/**
* Рассчитывает количество часов и минут между указанным начальным и конечным временем
* Если время начала работы больше времени конца, то считается, что конечное время - это время следующих суток
* @param worktimeFrom - время начала работы в формате ЧЧ:ММ (от 00:00 до 23:59)
* @param worktimeTo - время конца работы в формате ЧЧ:ММ (от 00:00 до 23:59)
* @return количество часов и минут между переданным временем в формате Хч Y?мин, например 6ч 18мин или 5ч, если количество часов полное
*/
export const getWorkDuration = (worktimeFrom: string, worktimeTo: string): string => {
    const worktimeFromInMinutes = getWorktimeToMinutes(worktimeFrom);
    const worktimeToInMinutes = getWorktimeToMinutes(worktimeTo);
    const minutesDiff = calcDiffBetweenWorktime(worktimeFromInMinutes, worktimeToInMinutes);
    return convertDiffToString(minutesDiff);
}
/**
* Вычиcляет количество минут, прошедших с начала суток
* @param worktimeFrom - время в формате ЧЧ:ММ (от 00:00 до 23:59)
* @returns количество минут, прошедших с 00ч 00минут
*/
//TODO
export const getWorktimeToMinutes = (worktime: string): number => {
    return 0;
}
/**
* Вычисляет количество минут между началом и концом рабочего дня с учётом суток
* @param worktimeFrom - время начала рабочего дня в виде количества минут, прошедших с начала суток
* @param worktimeTo - время конца рабочего дня в виде количества минут, прошедших с начала суток
* @returns количество минут между началом и концом рабочего дня с учётом суток
*/
//TODO
export const calcDiffBetweenWorktime = (worktimeFrom: number, worktimeTo: number): number => {
    return 0;
}
/**
* Преобразовывает количество минут во время в формате Хч Y?мин
* @param minutes - количество минут
* @returns время в формате Хч Y?мин, например 6ч 18мин или 5ч
*/
//TODO
export const convertDiffToString = (minutes: number): string => {
    return "6ч 18мин";
}

export default class App extends Component<AppProps, AppState> {
    state = {
        title: "Отображение списка групп",
        backendAddress: "",
        isLoading: true,
        group: undefined,
        loadData: this.loadData.bind(this)
    }
    /**
     * Метод загрузки данных с сервера
     */
    //TODO
    loadData() {}
    componentDidMount() {
        //Вызываем метод loadData при загрузке приложения
        this.loadData();
    }
    render() {
        const {isLoading, group, title} = this.state;
        return (
            <div className="container">
                <h1>{title}</h1>
                {
                    isLoading ?
                    <Spinner/>
                    //Структуру типа Group передаем на обработку отдельному компоненту
                    : <Group group={group}></Group>
                }
            </div>
        );
    }
}