import {
	Avatar,
	Box,
	Button,
	Divider,
	List,
	ListItem,
	ListItemAvatar,
	ListItemButton,
	ListItemText,
	Paper,
	Typography,
} from '@mui/material';
import { useDispatch } from 'react-redux';
import { dropship_description, MODAL_TYPES, warehouse_description } from '../constants/constants';
import STATES from '../constants/states';
import { setModal } from '../redux/features/providers/providersSlice';

const LocationsList = ({ title = '', data = [], setLocationDetails = () => {}, setErrorsMsg }) => {
	const dispatch = useDispatch();
	const admin_obj = eniture_rtsq || {};

	const handleEditLocation = location => {
		setErrorsMsg({ zip: '', city: '', state: '', country: '' });
		dispatch(
			setModal({
				open: true,
				type: MODAL_TYPES.location_settings,
				data: { action: 'edit', type: title === 'Warehouse' ? 1 : 2, ...location },
			})
		);

		// json parse additionals data if exists and string
		const additionals = JSON.parse(location.additionals || '{}');
		setLocationDetails({ ...location, ...additionals });
	};

	return (
		<>
			<Box
				display='flex'
				justifyContent='space-between'
				alignItems='center'
				flexWrap='wrap'
				mt={title === 'Drop ship' ? 10 : 0}>
				<Typography variant='h6' fontWeight='bold' component='div' sx={{ flexGrow: 1 }}>
					{title} Locations
				</Typography>
				<Button
					variant='contained'
					style={{ textTransform: 'initial' }}
					onClick={() => {
						setErrorsMsg({ zip: '', city: '', state: '', country: '' });
						dispatch(
							setModal({
								open: true,
								type: MODAL_TYPES.location_settings,
								data: { action: 'add', type: title === 'Warehouse' ? 1 : 2 },
							})
						);

						setLocationDetails({
							...STATES.location_settings,
							type: title === 'Warehouse' ? 1 : 2,
						});
					}}>
					Add {title === 'Warehouse' ? 'warehouse' : 'drop ship'}
				</Button>
			</Box>

			<Box mb={2} my={2}>
				<Typography variant='subtitle2' color='text.secondary'>
					{title === 'Warehouse' ? warehouse_description : dropship_description}
				</Typography>
			</Box>

			<Paper sx={{ overflowX: 'auto' }}>
				<List component='div' dense sx={{ p: 2, minWidth: 800 }}>
					{/* Empty list message */}
					{!data?.length && (
						<ListItem
							sx={{
								display: 'flex',
								justifyContent: 'center',
								alignItems: 'center',
								flexDirection: 'column',
							}}>
							<Typography variant='subtitle1' fontWeight='bold' align='center'>
								No {title?.toLowerCase()} locations to show
							</Typography>
							<p>Add {title?.toLowerCase()} locations to the list.</p>
						</ListItem>
					)}

					{data?.map(location => (
						<ListItemButton
							key={location?.id}
							sx={{
								borderBottom: '1px solid #e0e0e0',
								'&:last-child': { border: 0 },
							}}>
							<ListItem
								disablePadding
								secondaryAction={
									<Box sx={{ display: 'block' }}>
										<Button
											variant='text'
											title='Edit'
											sx={{ textTransform: 'capitalize' }}
											onClick={() => handleEditLocation(location)}>
											Edit
										</Button>
										<Button
											variant='text'
											color='error'
											title='Delete'
											sx={{ textTransform: 'capitalize' }}
											onClick={() =>
												dispatch(
													setModal({
														open: true,
														type: MODAL_TYPES.delete_location,
														data: location,
													})
												)
											}>
											Delete
										</Button>
									</Box>
								}>
								<ListItemAvatar>
									<Avatar
										style={{ fontSize: '5em' }}
										src={`${admin_obj?.eniture_rtsq_url}/build/assets/location.png`}></Avatar>
								</ListItemAvatar>
								<ListItemText
									primary={
										<Typography variant='subtitle1' component='span'>
											<span>{location?.nickname} </span>
											<span
												style={{
													fontSize: '13px',
													marginLeft: '2em',
												}}>{`${
												location?.address ? `${location?.address}, ` : ''
											} ${location?.city} ${location?.state} ${
												location?.zip
											}, ${location?.country}`}</span>
										</Typography>
									}
								/>
							</ListItem>

							<Divider variant='fullWidth' component='li' />
						</ListItemButton>
					))}
				</List>
			</Paper>
		</>
	);
};

export default LocationsList;