/** @format */

import styled from 'styled-components';
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
import { sizePixelPixelSizeFunc } from '../../lib/sizeContext';

const ModalPhoneNumpadStyle = styled.div`
	box-shadow: 0 0 20px #00000047;
	background-color: #a6bdf438;
	backdrop-filter: blur(10px);
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin: 0;
	box-sizing: border-box;
	width: 230px;
	position: fixed;
	bottom: 120px;
	transition: ${({ switchAnim }) =>
		typeof switchAnim !== 'undefined' ? (switchAnim ? '0.2s' : '0s') : '0.2s'};
	z-index: 9999;
	${({ hiddenValue, position, variant }) =>
		hiddenValue
			? boxDialerWidjetPosition[variant][position].numpad.hidden
			: boxDialerWidjetPosition[variant][position].numpad.seen}
	border-radius: 20px;
	padding: 15px;
	display: grid;
	grid-template-rows: 40px 1fr;
	grid-gap: 15px;
	cursor: default;
	.settingIcon {
		position: absolute;
		font-size: 11px;
		cursor: pointer;
		top: 4px;
		right: 6px;
		color: #00000030;
	}
`;
ModalPhoneNumpadStyle.InputArea = styled.div`
	position: relative;
`;
ModalPhoneNumpadStyle.ButtonArea = styled.div`
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 8px;
`;
const Input = styled.input`
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background-color: #fff;
	border: 0;
	padding: 0 35px 0 10px;
	font-size: 22px;
	color: #000;

	:focus {
		border-color: inherit;
		-webkit-box-shadow: none;
		box-shadow: none;
		padding: 0 10px;
		font-size: 24px;
		outline: 0 none;
	}

	position: relative;
	display: inline-block;
	margin: 0;
	outline: none;

	&::-webkit-outer-spin-button,
	&::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* Firefox */

	&[type='number'] {
		-moz-appearance: textfield;
	}
`;
Input.BackSpaceIcon = styled(KeyboardBackspaceIcon)`
	color: black;
	position: absolute;
	right: 5px;
	cursor: pointer;
	top: 50%;
	transform: translate(0, -50%);
`;

const NumberButton = styled.div`
	/* background-color: #607d8b8f; */
	/* background-color: #0000007d; */
	backdrop-filter: blur(10px);
	border-radius: 20px;
	color: #fff;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	${({ sizeContext }) => sizePixelPixelSizeFunc(sizeContext, 22)}
	cursor: pointer;
	height: 33px;
	position: relative;
	background-color: ${({ status = '', type = '' }) =>
		type === 'call_button'
			? status === 'pending'
				? 'orange'
				: status === 'connected' && '#a0c13d'
			: '#0000007d'};
	transition: ${({ switchAnim }) =>
		typeof switchAnim !== 'undefined' ? (switchAnim ? '0.3s' : '0s') : '0.3s'};

	.callIcon {
		color: #0000007d;
	}
	:hover {
		.callIcon {
			animation: tilt-shaking 0.5s;
		}
	}
	@keyframes tilt-shaking {
		0% {
			transform: rotate(0deg);
		}
		25% {
			transform: rotate(10deg);
		}
		50% {
			transform: rotate(0eg);
		}
		75% {
			transform: rotate(-10deg);
		}
		100% {
			transform: rotate(0deg);
		}
	}
`;
NumberButton.CallButton = styled.div`
	padding: 0 10px;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(1fr, 3);
	position: relative;

	.left {
		grid-column: 1/3;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.call_text {
		color: #0000007d;
		padding: 0;
		margin: 0;
		font-size: 14px;
	}
	.right {
		grid-column: 3/4;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
		display: flex;
		align-items: center;
		.icon {
			margin: 0 auto;
			border: 4px solid transparent;
			width: 8px;
			height: 8px;
			opacity: 0.7;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			border-top-color: #000;
			${({ exNum }) =>
				exNum
					? {
							transform: 'rotate(177deg)',
							margin: '0 auto 4px auto',
					  }
					: {
							transform: 'rotate(0deg)',
							margin: '0 auto -4px auto',
					  }}/* transform: ${({ exNum }) =>
				exNum ? 'rotate(177deg)' : 'rotate(0deg)'}; */
		}
		::before {
			content: '';
			background: #0000007d;
			width: 1px;
			height: 70%;
		}
	}
`;
NumberButton.CallButtonModal = styled.div`
	position: absolute;
	z-index: 99999999999;
	bottom: 40px;
	transform: translate(-50%, 0);
	left: 50%;
	background-color: #fff;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	padding: 3px 3px 15px 3px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	transition: ${({ switchAnim }) =>
		typeof switchAnim !== 'undefined' ? (switchAnim ? '0.1s' : '0s') : '0.1s'};

	clip-path: polygon(100% 0, 100% 93%, 57% 93%, 50% 100%, 43% 93%, 0 93%, 0 0);
	${({ visiblevalue }) =>
		visiblevalue
			? {
					opacity: '1',
					transform: 'translate(-50%, 0)',
					display: 'block',
			  }
			: {
					opacity: '0',
					transform: 'translate(-50%, 0)',
					display: 'none',
			  }}
`;
NumberButton.CallButtonModalInset = styled.div`
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	.num_item {
		text-wrap: nowrap;
		color: #000;
		transition: ${({ switchAnim }) =>
			typeof switchAnim !== 'undefined'
				? switchAnim
					? '0.2s'
					: '0s'
				: '0.2s'};
		padding: 5px 10px;
		font-size: 14px;
		margin: 2px 0;
		border-radius: 10px;
		:hover {
			background-color: #0000001a;
			padding: 5px 10px;
			margin: 2px 0;
			border-radius: 10px;
		}
	}
	::-webkit-scrollbar {
		width: 5px;
	}

	/* Track */
	::-webkit-scrollbar-track {
		background: #fff0;
	}

	/* Handle */
	::-webkit-scrollbar-thumb {
		background: #abaaaa;
		border-radius: 10px;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #555;
	}
`;
NumberButton.Icon = styled.div`
	font-size: 20px;
`;
ModalPhoneNumpadStyle.Window = styled.div`
	display: ${({ visiblevalue }) => (visiblevalue == 1 ? 'block' : 'none')};
	position: fixed !important;
	bottom: 0 !important;
	right: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 999999 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
`;
export { NumberButton, Input };
export default ModalPhoneNumpadStyle;
