/** @format */

import styled from 'styled-components';
import CallIcon from '@mui/icons-material/Dialpad';
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';

const WidjetBlock = styled.div`
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	position: fixed;
	bottom: 30px;
	left: 50px;
	border-radius: 13px;
	background-color: #164e63e6;
	cursor: pointer;
	color: white;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	height: 70px;
	min-width: 180px;
	max-width: 200px;
	z-index: 999;
`;
WidjetBlock.AccauntInfo = styled.div`
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 30px;
	grid-template-rows: 1fr 10px;
	align-items: center;
	.left {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.right {
	}
	.title {
		font-size: 22px;
		font-weight: 600;
	}
	.bottom {
		height: 100%;
		grid-column: 1/3;
		grid-row: 2/3;
	}
	.status {
		border-radius: 10px;
		padding: 0 5px;
		margin: 0 5px;
		background-color: ${({ status }) =>
			status === 'pending'
				? 'orange'
				: status === 'connected'
				? '#a0c13d'
				: '#ccc'};
		color: ${({ status }) =>
			status === 'pending' ? '#fff' : status === 'connected' ? '#333' : '#ccc'};
	}
`;
WidjetBlock.StatusLine = styled.div`
	height: 100%;
	background-color: ${({ backColor }) => backColor};
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	background-color: ${({ status }) =>
		status === 'pending'
			? 'orange'
			: status === 'connected'
			? '#a0c13d'
			: '#ccc'};
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 10px 0 0;
	color: green;
	.verison {
		font-size: 10px;
		font-weight: bold;
		float: right;
	}
`;
const DialPadIcon = styled(CallIcon)`
	font-size: 26px;
`;

const ModalPhoneDropDowm = styled.div`
	width: 230px;
	position: absolute;
	bottom: 80px;
	transition: 0.2s;
	z-index: 99999999999999;
	transform: translate(${({ hidden }) => (hidden ? '-200%' : '-50%')}, 0%);
	left: 50%;
	background-color: #c9d5d9;
	border-radius: 20px;
	padding: 15px;
	display: grid;
	grid-template-rows: 40px 1fr;
	grid-gap: 15px;
	cursor: default;
`;
ModalPhoneDropDowm.InputArea = styled.div`
	position: relative;
`;
ModalPhoneDropDowm.ButtonArea = styled.div`
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 8px;
`;

const NumberButton = styled.div`
	background-color: #5e5e5e;
	color: #fff;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 7px;
	font-size: 22px;
	cursor: pointer;
	height: 33px;
	background-color: ${({ status, type }) =>
		type === 'call_button' && status === 'pending'
			? 'orange'
			: status === 'connected' && '#a0c13d'};
`;

NumberButton.Icon = styled.div`
	font-size: 20px;
`;
const Input = styled.input`
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background-color: #fff;
	border: 0 !important;
	padding: 0px 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;
	border: 0;

	&::-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;
	top: 5px;
	right: 5px;
	cursor: pointer;
	top: 50%;
	transform: translate(0, -50%);
`;

const Select = styled.select`
	width: 100%;
	height: 100%;
	: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;
	border: 0;
	background-color: #5e5e5e;
	color: #fff;
	font-size: 18px;
	border-radius: 7px;
	padding: 5px;
`;
export { DialPadIcon, ModalPhoneDropDowm, NumberButton, Input, Select };
export default WidjetBlock;