import get from 'lodash/get';
import * as d3Select from 'd3-selection';
import { wordwrap } from 'd3-jetpack';
import {
	ISubsidiaryCompanyData,
	SG_CLASS_SUBSISIARY_BOX,
	SG_HEIGHT,
	SG_WIDTH,
	SG_WIDTH_HAS_SUBS
} from './subsidiary-list-group.class';
import { COLOUR } from '../util/constants';
import { ellipsis } from './utilities';

const onMouseOverSGBox = (company: ISubsidiaryCompanyData, i, nodes) => {
	const id =
		get(company, ['company', 'scoutId']) ||
		get(company, ['parent', 'company', 'scoutId']);

	const isScoutCompany =
		get(company, 'isScoutCompany') ||
		get(company, ['parent', 'isScoutCompany']);

	if (id && isScoutCompany) {
		d3Select
			.select(`#id-${id}.${SG_CLASS_SUBSISIARY_BOX}`)
			.attr('fill', COLOUR.ATHENS_GRAY_LIGHT);
		d3Select.select(nodes[i]).attr('cursor', 'pointer');
	}
};

const onMouseOutSGBox = (company: ISubsidiaryCompanyData) => {
	const id =
		get(company, ['company', 'scoutId']) ||
		get(company, ['parent', 'company', 'scoutId']);

	const isScoutCompany =
		get(company, 'isScoutCompany') ||
		get(company, ['parent', 'isScoutCompany']);

	if (id && isScoutCompany) {
		d3Select
			.select(`#id-${id}.${SG_CLASS_SUBSISIARY_BOX}`)
			.attr('fill', COLOUR.LIGHTEST_TEAL);
	}
};

const appendBox = selection => {
	const id = ({ company }: ISubsidiaryCompanyData) =>
		company ? `id-${company.scoutId}` : null;

	const width = ({ subsidiaries }: ISubsidiaryCompanyData) =>
		subsidiaries.length > 0 ? SG_WIDTH_HAS_SUBS : SG_WIDTH;

	const fill = ({ isScoutCompany }: ISubsidiaryCompanyData) =>
		isScoutCompany ? COLOUR.LIGHTEST_TEAL : COLOUR.WHITE;

	selection
		.append('rect')
		.at({
			class: SG_CLASS_SUBSISIARY_BOX,
			height: SG_HEIGHT,
			stroke: COLOUR.IRON,
			strokeWidth: 1,
			id,
			width,
			fill
		})
		.on('mouseover', onMouseOverSGBox)
		.on('mouseout', onMouseOutSGBox);
};

const appendTopLine = selection => {
	const width = ({ subsidiaries }: ISubsidiaryCompanyData) =>
		subsidiaries.length > 0 ? SG_WIDTH_HAS_SUBS : SG_WIDTH;

	const fill = ({ isScoutCompany }: ISubsidiaryCompanyData) =>
		isScoutCompany ? COLOUR.DARK_TEAL : COLOUR.IRON;

	selection.append('rect').at({
		height: 2,
		width,
		fill
	});
};

const appendSubsidiaryName = selection => {
	const name = ({ name }) => wordwrap(ellipsis(name.toUpperCase(), 45), 30);

	selection
		.append('text')
		.at({
			fill: COLOUR.SHUTTLE_GREY,
			y: 25,
			fontSize: 14,
			fontFamily: 'MetricWeb, sans-serif'
		})
		.tspans(name)
		.at({ x: 7.5 })
		.on('mouseover', onMouseOverSGBox)
		.on('mouseout', onMouseOutSGBox);
};

const appendCountryCode = selection => {
	const textFill = ({ isScoutCompany }) =>
		isScoutCompany ? COLOUR.WHITE : COLOUR.SHUTTLE_GREY;

	const backgroundFill = ({ isScoutCompany }) =>
		isScoutCompany ? COLOUR.SHUTTLE_GREY : COLOUR.IRON;

	selection
		.append('rect')
		.at({
			width: 30,
			height: 15,
			x: SG_WIDTH - 30 - 8,
			y: 15,
			rx: 2,
			ry: 2,
			fill: backgroundFill
		})
		.on('mouseover', onMouseOverSGBox)
		.on('mouseout', onMouseOutSGBox);

	selection
		.append('text')
		.at({
			fontFamily: 'MetricWeb, sans-serif',
			fontSize: 12,
			lineHeight: 14,
			fontWeight: 500,
			x: SG_WIDTH - 30 - 8 + 5,
			y: 10 + 17.5,
			fill: textFill
		})
		.text(({ country_iso3 }) => country_iso3)
		.on('mouseover', onMouseOverSGBox)
		.on('mouseout', onMouseOutSGBox);
};

export const buildSubsidiaryBox = selection => {
	appendBox(selection);
	appendTopLine(selection);
	appendSubsidiaryName(selection);
	appendCountryCode(selection);
};