import React, { useState, useRef, useEffect } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronDown } from '@fortawesome/free-solid-svg-icons';

const BlockNumber = () => {

  const [applicationId, setApplicationId] = useState('');
  const [applicationIds, setApplicationIds] = useState([]);  
  const [isSelectOpen, setIsSelectOpen] = useState(false);
  const [phoneId, setPhoneId] = useState('');
  const [description, setDescription] = useState('');

  const handleFocus = () => {
    setIsSelectOpen(true);
  };

  const handleBlur = () => {
      setIsSelectOpen(false);
  };


  const handleClick = async () => {
      console.log('Make OTP Demo')
  };

  return (
    <div className='container mt-5'>
      <div style={styles.contentContainer}>
      <div className="form-group col align-items-center">
        {/* Application ID Selection */}
        <div className="col-md-6 my-2">
            <div style={styles.selectWrapper}>
                <select
                    id="applicationId"
                    className="form-control"
                    style={{ 
                      ...styles.select, 
                      border: '1px solid lightgray'
                    }}
                    value={applicationId}
                    onChange={(e) => setApplicationId(e.target.value)}
                    onFocus={handleFocus}
                    onBlur={handleBlur}
                >
                    <option value="">Select Application ID</option>
                    {applicationIds.map((app) => (
                        <option key={app.id} value={app.id}>
                            {app.name}
                        </option>
                    ))}
                </select>
                <FontAwesomeIcon
                    icon={isSelectOpen ? faChevronDown : faChevronLeft}
                    style={styles.chevronIcon}
                />
            </div>
        </div>

        {/* Phone Number Input */}
        <div className="col-md-6 my-2">
            <div className="input-group" style={{ marginTop: '1rem' }}>
                <span className="input-group-prepend">
                    <span className="input-group-text">+62</span>
                </span>
                <input
                    type="text"
                    id="phoneId"
                    className="form-control"
                    placeholder="Phone Number"
                    value={phoneId}
                    onChange={(e) => setPhoneId(e.target.value)}
                />
            </div>
        </div>

        {/* Description Text Area */}
        <div className="col-md-6 my-3">
          <textarea
              id="description"
              className="form-control"
              rows="4"
              placeholder="Enter description here..."
              value={description}
              onChange={(e) => setDescription(e.target.value)}
          />
        </div>

        {/* Submit Button */}
        <div>
          <button onClick={handleClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
            <p className="text-white mb-0">Submit Now</p>
          </button>
        </div>
    </div>

      </div>
    </div>
  )
}

export default BlockNumber

const styles = {
    contentContainer: {
    padding: '20px',
    border: '0.1px solid rgba(0, 0, 0, 0.2)',
    borderLeft: '4px solid #0542cc',
    borderRadius: '10px',
    width: '100%',
  },
  selectWrapper: {
    position: 'relative',
    marginTop: '0', 
  },
  select: {
      width: '100%',
      paddingRight: '30px', 
      flex: 1,
      fontSize: '16px',
      border: 'none',
      outline: 'none',
  },
  chevronIcon: {
      position: 'absolute',
      right: '10px',
      top: '50%',
      transform: 'translateY(-50%)',
      pointerEvents: 'none',
  },
}