import { useState, useEffect } from 'react'
import { Link, Redirect, useParams } from 'react-router-dom'
import roomApi from '../../apis/room.api';
import userApi from '../../apis/user.api'
import catchErrors from "../../context/catchError";

const ChannelSingle = (props) => {
  const [error, setError] = useState("");
  const [succes, setSucces] = useState(false);
  const [roomName, setRoomName] = useState('');
  const { roomId, channelId } = useParams();
  const userId = localStorage.getItem('user')


  async function joinChannel(e) {
    try {
      const data = await userApi.getUser(userId);
      const key = indexCheck(e)
      const mem = props.channel[key].joinUser
      const joinCh = mem.includes(data.name);
      if (!joinCh) {
        const roomA = await roomApi.joinChannel({ roomId: roomId, channelName: e, plusUser: data.name, index: key })
        setRoomName(e)
        setSucces(true)
      } else {
        alert('이미 참여된 채널입니다.')
      }
    } catch (error) {
      catchErrors(error, setError);
    }
  }
  
  function indexCheck(e) {
    for (const key in props.channel) {
      if (props.channel[key].channelName === e) {
        return key
      }
    }
  }

  if(succes){
    alert(`${roomName} 채널에 참가되었습니다.`)
    window.location.href=`/room/${roomId}/${roomName}`
  }

  return (
    <div>
      <div className="overflow-auto" style={{ height: '610px' }}>
        {props.channel.map((el) => (
          <div className="mb-3">
            <Link to={`/room/${roomId}/${el.channelName}`}>
              <div
                className="m-3 p-1 row"
                style={{ backgroundColor: '#E0CEE8' }}
                onClick={() => joinChannel(el.channelName)}
              >
                {el.channelName === channelId ? (
                  <img
                    className="col-auto mt-2"
                    src="/fullSpeaker.png"
                    width="25px"
                    height="25px"
                  />
                ) : (
                  <img
                    className="col-auto mt-2"
                    src="/emptySpeaker.png"
                    width="25px"
                    height="25px"
                  />
                )}
                <h5 className="col mt-2" style={{ color: 'black' }}>
                  {el.channelName}
                </h5>
              </div>
            </Link>

            {el.joinUser &&
              el.joinUser.map((e) => (
                <div>
                  <ul className="mx-5" style={{ color: '#76D079' }}>
                    <li>
                      <p style={{ color: 'black' }}>{e}</p>
                    </li>
                  </ul>
                </div>
              ))}
          </div>
        ))}
      </div>
    </div>
  )
}

export default ChannelSingle