import { Button as ButtonComponent, Card as CardComponent, Space } from 'antd';
import { StyledCSS } from 'container/GantChart/Trace/styles';
import RGL, { WidthProvider } from 'react-grid-layout';
import styled, { css } from 'styled-components';

const ReactGridLayoutComponent = WidthProvider(RGL);

export const Card = styled(CardComponent)`
	&&& {
		height: 100%;
	}

	.ant-card-body {
		height: 95%;
		padding: 0;
	}
`;

interface Props {
	isDarkMode: boolean;
}

export const CardContainer = styled.div<Props>`
	:hover {
		.react-resizable-handle {
			position: absolute;
			width: 20px;
			height: 20px;
			bottom: 0;
			right: 0;
			background-position: bottom right;
			padding: 0 3px 3px 0;
			background-repeat: no-repeat;
			background-origin: content-box;
			box-sizing: border-box;
			cursor: se-resize;

			${({ isDarkMode }): StyledCSS => {
				const uri = `data:image/svg+xml,%3Csvg viewBox='0 0 6 6' style='background-color:%23ffffff00' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' x='0px' y='0px' width='6px' height='6px'%0A%3E%3Cg opacity='0.302'%3E%3Cpath d='M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z' fill='${
					isDarkMode ? 'white' : 'grey'
				}'/%3E%3C/g%3E%3C/svg%3E`;

				return css`
					background-image: ${(): string => `url("${uri}")`};
				`;
			}}
	}
`;

export const ReactGridLayout = styled(ReactGridLayoutComponent)`
	border: 1px solid #434343;
	margin-top: 1rem;
	position: relative;
	min-height: 40vh;

	.react-grid-item.react-grid-placeholder {
		background: grey;
		opacity: 0.2;
		transition-duration: 100ms;
		z-index: 2;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
`;

export const ButtonContainer = styled(Space)`
	display: flex;
	justify-content: end;
	margin-top: 1rem;
`;

export const Button = styled(ButtonComponent)`
	&&& {
		display: flex;
		justify-content: center;
		align-items: center;
	}
`;