import { PostbattlePlayerModel } from 'gui/impl/gen/view_models/views/lobby/postbattle/postbattle_player_model';
import { ALLIES_TEAM_ALIAS } from 'gui/impl/gen/view_models/views/lobby/postbattle/postbattle_team_stats_model';
import React, { useState } from 'react';
import { HorizontalTabs } from '../../../../../../../components/tabs/HorizontalTabs/HorizontalTabs';
import { Tab } from '../../../../../../../components/tabs/Tab/Tab';
import { LifeStatus } from '../../LifeStatus/LifeStatus';
import { PlayerNickname } from '../../PlayerNickname/PlayerNickname';
import { BackwardButton } from '../BackwardButton/BackwardButton';
import { EfficiencyAchievements } from '../EfficiencyAchievements/EfficiencyAchievements';
import { EfficiencyTable } from '../EfficiencyTable/EfficiencyTable';
import { StatisticsInfo } from '../StatisticsInfo/StatisticsInfo';

import styles from './DetailedStats.css';

interface IProps extends PostbattlePlayerModel {
    alias: string,
    onClose: () => void;
}

const DetailedStats: React.FC<IProps> = ({
    isPersonal,
    localizedVehicleName,
    user,
    onClose,
    details,
    alias
}) => {
    const [_isPersonal, setIsPersonal] = useState(isPersonal);

    const handleClose = () => {
        onClose();
    };
    const backwardButtonText = (alias === ALLIES_TEAM_ALIAS) ?
        R.strings.postbattle_screen.detailedStats.backwardButton.enemies() :
        R.strings.postbattle_screen.detailedStats.backwardButton.allies();

    return (
        <div className={styles.base}>
            <div className={styles.header}>
                <div className={styles.vehicleName}>
                    {localizedVehicleName}
                </div>
                <div className={styles.playerSummary}>
                    <PlayerNickname {...user} />
                    <LifeStatus {...details} />
                </div>
                <div className={styles.close}
                    onClick={handleClose}
                />
            </div>
            {Boolean(details.achievements.length) && (
                <div className={styles.rewards}>
                    <EfficiencyAchievements achievements={details.achievements} />
                </div>
            )}
            <HorizontalTabs className={styles.tabs}>
                <React.Fragment tabs-role="tabs-list">
                    <Tab
                        // tabs-role="tab"
                        tab-key="0"
                        onClick={() => setIsPersonal(true)}
                    >
                        Текст
                    </Tab>
                    <Tab
                        // tabs-role="tab"
                        tab-key="1"
                        onClick={() => setIsPersonal(false)}
                    >
                        Текст2
                    </Tab>
                </React.Fragment>
                {/*<div tab-key="0" tabs-role="tab-content">*/}
                {/*    <EfficiencyTable*/}
                {/*        efficiency={details.efficiency}*/}
                {/*        capturePoints={details.capturePoints}*/}
                {/*        droppedCapturePoints={details.droppedCapturePoints}*/}
                {/*    />*/}
                {/*</div>*/}
                {/*<div tab-key="1" tabs-role="tab-content">*/}
                {/*    <StatisticsInfo items={details.statistics} />*/}
                {/*</div>*/}
            </HorizontalTabs>
            <div className={styles.stats}>
                {_isPersonal ? (
                    <EfficiencyTable
                        efficiency={details.efficiency}
                        capturePoints={details.capturePoints}
                        droppedCapturePoints={details.droppedCapturePoints}
                    />
                ) : (
                    <StatisticsInfo items={details.statistics} />
                )}
            </div>
            <div className={styles.footer}>
                <BackwardButton
                    onClick={handleClose}
                    text={backwardButtonText}
                />
            </div>
        </div>
    );
};

export { DetailedStats };