import styled, {keyframes} from 'styled-components';
import { COLOR_PALETTE } from "../../constants/colors";

export interface ThemeProps {
	primaryColor?: string;
	inActiveColor?: string;
	inActiveTextColor?: string;
	stepColor?: string;
	currentStepColor?: string;
	textColor?: string;
	headerFont?: string;
	headerFontColor?: string;
	headerFontSize?: string;
}

const baseDiv = styled.div`
	display: flex;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
`;

export const Container = baseDiv.extend`
	flex-direction: column;
`;

export interface HeaderProps {
	theme: ThemeProps;
}
export const Header = baseDiv.extend`
	background-color: ${(props: HeaderProps) => props.theme && props.theme.primaryColor ? props.theme.primaryColor : COLOR_PALETTE.BLUE_DARK_1};
	color: ${(props: HeaderProps) => props.theme && props.theme.headerFontColor ? props.theme.headerFontColor : COLOR_PALETTE.WHITE};
	font-family: ${(props: HeaderProps) => props.theme && props.theme.headerFont ? props.theme.headerFont: 'inherit'};
	font-size: ${(props: HeaderProps) => props.theme && props.theme.headerFontSize ? props.theme.headerFontSize: '20px'};
	height: 68px;
	border-radius: 3px;
	margin-bottom: 20px;
`;

// Stepper bar
export const StepBarContainer = baseDiv.extend`
	height: 80px;
`;

export const STEP_POINT_STATE = {
	INACTIVE: 'INACTIVE',
	ACTIVE: 'ACTIVE',
	CURRENT: 'CURRENT',
};

const getStepPointColors = (state, theme) => {
	let primaryColor, inActiveColor, activeTextColor, inActiveTextColor;
	let backgroundColor, borderColor, borderWidth, textColor;
	primaryColor = theme && theme.stepColor ? theme.stepColor: COLOR_PALETTE.BLUE_DARK_1;
	inActiveColor = theme && theme.inActiveColor  ? theme.inActiveColor : COLOR_PALETTE.GREY_LIGHT_2;
	inActiveTextColor = theme && theme.inActiveTextColor  ? theme.inActiveTextColor : COLOR_PALETTE.GREY_LIGHT_2;
	activeTextColor = theme && theme.textColor  ? theme.textColor : COLOR_PALETTE.BLACK;
	switch (state) {
		case STEP_POINT_STATE.ACTIVE: {
			backgroundColor = primaryColor;
			borderColor = primaryColor;
			textColor = activeTextColor;
			break;
		}
		case STEP_POINT_STATE.INACTIVE: {
			backgroundColor = COLOR_PALETTE.GREY_LIGHT_2;
			borderColor = inActiveColor;
			textColor = inActiveTextColor;
			borderWidth = 1;
			break;
		}
		case STEP_POINT_STATE.CURRENT: {
			backgroundColor = COLOR_PALETTE.BLACK;
			borderColor = primaryColor;
			borderWidth = 4;
			textColor = activeTextColor;
			break;
		}
	}
	return {
		backgroundColor,
		borderColor,
		borderWidth,
		textColor,
	};
};

export interface StepPointProps {
	state: string;
	width?: string;
	clickable: boolean;
	theme?: ThemeProps;
}

export const StepPoint = styled.circle`
	fill: ${(props: StepPointProps) => getStepPointColors(props.state, props.theme).backgroundColor};		
	stroke: ${(props: StepPointProps) => getStepPointColors(props.state, props.theme).borderColor};
	stroke-width: ${(props: StepPointProps) => getStepPointColors(props.state, props.theme).borderWidth};
	transition: 250ms ease-in all;
	transition-delay: ${(props: StepPointProps) => (props.clickable && props.state === STEP_POINT_STATE.CURRENT) ? '0' : '250ms'};
	cursor: ${(props: StepPointProps) => props.clickable ? 'pointer' : 'default'};
`;

export const StepPointLabel = styled.text`
	x: ${(props: StepLabelProps) => props.x};
	y: ${(props: StepLabelProps) => props.y};
	fill: ${(props: StepLabelProps) => getStepPointColors(props.state, props.theme).textColor};
	font-family: inherit;
	font-size: 11px;
	user-select: none;
	transition: 250ms ease-in all;
	transition-delay: 250ms;
	cursor: default;
`;

export interface StepLabelProps {
	x: number;
	y: number;
	state: string;
	theme?: ThemeProps;
}

export interface StepLineProps {
	x1: number;
	x2: number;
	y1: number;
	y2: number;
	state: string;
	theme?: ThemeProps;
}

const animateLine = width => keyframes`
	from {
		stroke-dashoffset: ${width};
	}
	to {
		stroke-dashoffset: 0;
	}
`;
const animateLineOut = width => keyframes`
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: ${width};
	}
`;

export const StepLine = styled.line`
	stroke: ${(props: StepLineProps) => props.theme && props.theme.inActiveColor ? props.theme.inActiveColor : COLOR_PALETTE.GREY_LIGHT_1}; 
`;

export interface AnimatedLineProps {
	width: number;
}

export const AnimatedLine = styled.path`
	stroke-dasharray:  ${(props: AnimatedLineProps) => props.width};
	stroke-dashoffset: ${(props: AnimatedLineProps) => props.width};
	&.entering {
		animation: ${(props: AnimatedLineProps) => animateLine(props.width)} 250ms linear forwards;
	}
	&.exiting {
		animation: ${(props: AnimatedLineProps) => animateLineOut(props.width)} 250ms linear;
	}
`;

export const BtnBarContainer = styled.div`
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
`;

export interface ButtonProps {
	type: string;
	theme?: ThemeProps;
}

export const BUTTON_TYPE = {
	CANCEL: 'CANCEL',
	NEXT: 'NEXT',
	DONE: 'DONE'
};

const getButtonProperties = (props: ButtonProps) => {
	const primaryColor = props.theme && props.theme.primaryColor ? props.theme.primaryColor : COLOR_PALETTE.BLUE_DARK_1;
	switch (props.type) {
		case BUTTON_TYPE.NEXT:
		case BUTTON_TYPE.DONE: {
			return {
				backgroundColor: primaryColor,
				color: COLOR_PALETTE.WHITE,
				border: `1px solid ${primaryColor}`,
			};
		}
		case BUTTON_TYPE.CANCEL: {
			return {
				backgroundColor: COLOR_PALETTE.WHITE,
				color: primaryColor,
				border: `1px solid ${primaryColor}`,
			};
		}
		default:
			return {
				backgroundColor: COLOR_PALETTE.WHITE,
				color: primaryColor,
				border: `1px solid ${primaryColor}`,
			};
	}
};

export const Button = styled.button`
	border: ${(props: ButtonProps) => getButtonProperties(props).border};	
	outline: none;
	color: ${(props: ButtonProps) => getButtonProperties(props).color};	
	background-color: ${(props: ButtonProps) => getButtonProperties(props).backgroundColor};	
	cursor: pointer;
	width: 160px;
	height: 32px;
	font-size: 16px;
	font-family: inherit;
	border-radius: 3px;
	margin: 0 5px;
`;