/** @format */

import styled from 'styled-components';
import CallIcon from '@mui/icons-material/Dialpad';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';

const DefaultWidjetStyle = styled.div`
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	height: 70px;
	min-width: 180px;
	max-width: 200px;
	border-radius: 13px;
	background-color: #164e63e6;
	cursor: pointer;
	color: white;
	z-index: 999;

	position: fixed;
	${({ position }) => boxDialerWidjetPosition.defaultWidjet[position].block}
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 30px;
	grid-template-rows: 1fr 10px;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	.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'};
	}
`;
DefaultWidjetStyle.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;
`;

export { DialPadIcon };
export default DefaultWidjetStyle;
