import React from 'react';

/** @type {ICookie} */
import cookie from 'react-cookie';
import * as cookieNames from "../../../constants/cookies";

import ls from '../../../../../components/mp-cl/src/service/localization/LocalizationService';

/** @type {UserService} */
import userService from '../../../../../components/mp-cl/src/service/user/UserService';

import {splitToLines} from '../../../helpers/CommonHelper';


import RightSideBar from '../../../components/RightSideBar/RightSideBar';
import ProjectCostCard from '../../../components/ProjectCostCard/ProjectCostCard';
import ProjectStatisticCard from '../../../components/ProjectStatisticCard/ProjectStatisticCard';
import ProjectInvitationsStatistic from '../../../components/ProjectInvitationsStatistic/ProjectInvitationsStatistic';
import ProjectFreelancersList from '../../../components/ProjectFreelancersList/ProjectFreelancersList';

import ProjectFreelancersInvitationsList from '../../../components/ProjectFreelancersInvitationsList/ProjectFreelancersInvitationsList';
import ProjectFreelancersDeclinedList from '../../../components/ProjectFreelancersInvitationsList/ProjectFreelancersDeclinedList';

import MPHeaderTabs from '../../../components/Common/MPHeaderTabs/MPHeaderTabs';
import MPHeaderTab from '../../../components/Common/MPHeaderTab/MPHeaderTab';

const TO_PROJECT = 'to_project';

ls.requestDic("mp-project");
ls.requestDic("mp-profile-customer");

export default class ProjectPage_Customer extends React.Component {
	/** @type {ProjectPageProps} */
	props;

	/** @type {ProjectPage_CustomerRefs} */
	refs;

	/** @type {ProjectPage_CustomerState} */
	state = new ProjectPage_CustomerState();

	/** @param {ProjectPageProps} props */
	constructor(props) {
		super(props);

		var dispatch = props.dispatch;
		var projectPage = props.projectPage;
		var project = projectPage.project;
	}

	render() {
		var dispatch = this.props.dispatch;
		var ui = this.props.ui;
		var user = this.props.user;
		var projectPage = this.props.projectPage;
		var project = projectPage.project;
		var invitationGroups = projectPage.invitationGroups;
		var jobsGroups = projectPage.jobsGroups;
		var langDirectionStageGroups = projectPage.langDirectionStageGroups;
		var jobsForCustomerProjectPage = projectPage.jobsForCustomerProjectPage;
		var invitationsForCustomerProjectPage = projectPage.invitationsForCustomerProjectPage;

		var langDirectionGroups = projectPage.langDirectionGroups;

		/** @type {ProjectPage_CustomerState} */
		var state = this.state;

		/** @type {LocationModel} */
		var location = this.props.location;

		if (project != null) {
			var invitationList = (
				<ProjectFreelancersInvitationsList project={project}
				                                   list={invitationsForCustomerProjectPage}
				                                   jobsGroups={jobsGroups}
				                                   /*openChatHandler={this.openChatHandler}*//>
			);

			var declinedCanceledList = (
				<ProjectFreelancersDeclinedList project={project}
				                                list={invitationsForCustomerProjectPage}
				                               /* openChatHandler={this.openChatHandler}*/ />
			);

			/** @type {InvitationModel} */
			var firstInvite = project.getFirstInvite();

			return (
				<div className="layout horizontal flex container">
					<div className="flex g-sidebar-empty"></div>
					<div className="layout vertical flex three">
						<MPHeaderTabs className="header__tabs"
						              value={state.activeTabValue}
						              onChange={this.tabHandleChange}>
							<MPHeaderTab label={(<span><span className="icon icon_mp-arrow-left"></span>{ls.getL10n('to project label', 'mp-project')}</span>)}
							             value={TO_PROJECT}></MPHeaderTab>
							<MPHeaderTab label={ls.getL10n('team tab label', 'mp-project')} value="team">
								<ProjectFreelancersList groups={jobsForCustomerProjectPage}
								                        invitationList={invitationList}
								                        declinedCanceledList={declinedCanceledList}
								                        project={project}
								                        /*openChatHandler={this.openChatHandler}*//>
							</MPHeaderTab>

							<MPHeaderTab label={ls.getL10n('payments tab label', 'mp-project')} value="payments">
								<div className="tabs-container">
									<div className="page__title">{ls.getL10n('project payments', 'mp-project')}</div>
									<ProjectCostCard user={user} projectPage={projectPage} />

									<div className="layout horizontal
											project-payments__remark">
										<div className="project-payments__remark-text">
											{splitToLines(ls.getL10n('note after job customer text', 'mp-profile-customer'))}
										</div>
									</div>

									{
										langDirectionGroups != null && langDirectionGroups.length > 0 ?
											<ProjectStatisticCard user={user} projectPage={projectPage} initiallyOpenedNestedList={true}/>
										:
											<ProjectInvitationsStatistic user={user} projectPage={projectPage} initiallyOpenedNestedList={true}/>
									}
								</div>
							</MPHeaderTab>
						</MPHeaderTabs>
					</div>

					<RightSideBar ui={ui}>
						<div className="layout vertical flex right-sidebar">
						</div>
					</RightSideBar>
				</div>
			);
		}

		return null;
	}

	tabHandleChange = (value) => {
		/** @type {ProjectModel} */
		var project = this.props.projectPage.project;

		if (value == TO_PROJECT) {
			location.href = userService.getSmartcatLink(`/project/${project.catId}`);
		}
		else {
			/** @type {ProjectPage_CustomerState} */
			var state = /** @type {ProjectPage_CustomerState} */{};
			state.activeTabValue = value;
			this.setState(state);
			cookie.save(cookieNames.ProjectActiveTab, value, {path: '/'});
		}
	};
}

class ProjectPage_CustomerState {
	/** @type {string} */
	activeTabValue = cookie.load(cookieNames.ProjectActiveTab);
}

class ProjectPage_CustomerRefs {
}