import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bookSlot, saveDetails, selectSlot } from '../Action/action';
import { withRouter } from './withRouter';

class Booking extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedSlot: null,
      name: '',
      contact: '',
      errorStmt: '',
    };
  }

  handleSlotClick = (slot) => {
    const { bookingCheck, selectedDate } = this.props;
    const isBooked = bookingCheck.some(b => b.slot === slot && b.date === selectedDate);
    if (!isBooked) {
      this.setState({ selectedSlot: slot, errorStmt: '' });
      this.props.selectSlot(slot);
    }
  };

  validate = () => {
    const { selectedSlot, name, contact } = this.state;
    if (!selectedSlot) {
      this.setState({ errorStmt: 'Select your slot!!!' });
      return false;
    }
    const nameRegex = /^[A-Za-z ]+$/;
    const phoneRegex = /^[0-9]{10}$/;
    if (!nameRegex.test(name) || !phoneRegex.test(contact)) {
      this.setState({ errorStmt: 'Invalid Input!!!' });
      return false;
    }
    return true;
  };

  handleBook = () => {
    if (!this.validate()) return;
    const bookingID = Math.floor(1000 + Math.random() * 9000);
    const { selectedGame, selectedDate } = this.props;
    const { selectedSlot, name, contact } = this.state;

    this.props.bookSlot({ id: bookingID, name, contact, game: selectedGame.name, slot: selectedSlot, date: selectedDate });
    this.props.saveDetails({ id: bookingID, name, contact });
    alert(`Booking successful! Your ID is ${bookingID}`);
    this.props.navigate('/');
  };

  render() {
    const { selectedGame, selectedDate, bookingCheck } = this.props;
    const { selectedSlot, name, contact, errorStmt } = this.state;
    const slots = ['10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM'];

    const today = new Date().toISOString().split('T')[0];
    const tomorrow = new Date();
    tomorrow.setDate(new Date().getDate() + 1);
    const formattedTomorrow = tomorrow.toISOString().split('T')[0];

    const renderSlots = () => (
      <div className="slot_list">
        {slots.map(slot => {
          const isBooked = bookingCheck.some(b => b.slot === slot && b.date === selectedDate);
          const isSelected = selectedSlot === slot;
          let color = 'green';
          if (isBooked) color = 'red';
          else if (isSelected) color = 'blue';

          return (
            <span
              key={slot}
              style={{ backgroundColor: color, margin: '5px', padding: '5px', display: 'inline-block' }}
              onClick={() => this.handleSlotClick(slot)}
            >
              <h4>{slot}</h4>
            </span>
          );
        })}
      </div>
    );

    return (
      <div>
        <header>
          <h2>{selectedGame.name}</h2>
          <p>{selectedDate}</p>
        </header>
        <button onClick={() => this.props.navigate('/')}>Back</button>
        {selectedDate === today && <p>Booking has been closed. Book your slot for {formattedTomorrow}</p>}
        {selectedDate === formattedTomorrow && (
          <>
            {renderSlots()}
            <input id="contact" placeholder="Name" value={name} onChange={(e) => this.setState({ name: e.target.value })} />
            <input id="contact" placeholder="Contact" value={contact} onChange={(e) => this.setState({ contact: e.target.value })} />
            <button id="book_button" onClick={this.handleBook}>Book Now</button>
            {errorStmt && <p>{errorStmt}</p>}
          </>
        )}
        {selectedDate > formattedTomorrow && <p>Booking is not opened yet</p>}
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  selectedGame: state.selectedGame[0] || {},
  selectedDate: state.selectedDate,
  bookingCheck: state.bookingCheck,
});

const mapDispatchToProps = {
  bookSlot,
  saveDetails,
  selectSlot,
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Booking));