import React from 'react';
import {
  IconButton,
  Paper,
  Typography,
  useMediaQuery,
  useTheme,
} from '@mui/material';
import divineShepherd from '/divine-shepherd.jpg';
import InsertInvitationIcon from '@mui/icons-material/InsertInvitation';
import { useAppDispatch } from '../hooks';
import { showDialog } from '../slices/uiSlice';

function Schedule() {
  const dispatch = useAppDispatch();
  const theme = useTheme();
  const isMobile = useMediaQuery('(max-width: 768px)');

  const handleOpen = () => {
    dispatch(showDialog());
  };

  return (
    <div
      style={{
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundImage: `url(${isMobile ? 'none' : divineShepherd})`,
        backgroundSize: 'cover',
      }}
    >
      <Paper
        elevation={3}
        sx={{
          width: { xs: '90%', md: 512 },
          px: 2,
          borderRadius: 2,
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ width: '35%' }}>
            <p>April 26, 2025</p>
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-around',
              width: '65%',
            }}
          >
            <Typography variant="h5" sx={{ lineHeight: 1.6 }}>
              Wedding Schedule
            </Typography>
            <IconButton
              color="inherit"
              onClick={handleOpen}
              aria-label="insert invitation"
            >
              <InsertInvitationIcon />
            </IconButton>
          </div>
        </div>
        <hr style={{ width: '100%' }} />
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ width: '35%' }}>
            <p>4:30 pm</p>
          </div>
          <div style={{ width: '65%' }}>
            <Typography variant="h6">Ceremony</Typography>
            <p>
              Divine Shepherd
              <br />
              <a
                href="https://maps.app.goo.gl/dGWvmjPiVjNGBVkZ9"
                style={{ color: theme.palette.primary.main }}
              >
                15005 Q St, Omaha, NE 68137
              </a>
            </p>
          </div>
        </div>
        <hr style={{ width: '100%' }} />
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ width: '35%' }}>
            <p>6:00 pm</p>
          </div>
          <div style={{ width: '65%' }}>
            <Typography variant="h6">Reception</Typography>
            <p>
              A Venue on the Ridge
              <br />
              <a
                href="https://maps.app.goo.gl/35RRqxzQdq6E4eSMA"
                style={{ color: theme.palette.primary.main }}
              >
                20033 Elkhorn Ridge Dr, Elkhorn, NE 68022
              </a>
            </p>
          </div>
        </div>
      </Paper>
    </div>
  );
}

export default Schedule;