import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { Button } from 'antd';
import { Hr } from 'styles/custom-styled-components';
import { useParams } from 'react-router-dom';
import { fetchAPI } from 'utils/fetchAPI';
import { STAFF, UNASSIGN_STAFF, PUBLIC_API } from 'containers/App/urls';
import RestaurantStaffModal from './Restaurant-staffs/RestaurantStaffModal';
import { StaffModel } from '../Store/types';
import { FormattedMessage } from 'react-intl';
import messages from 'translations/messages';
import { DeletePopOver } from './Delete-popover';
import { MOBILE_BREAK_POINT } from 'styles/constants';
import { PlusCharacter } from 'styles/icon-components';
import Avatar from 'react-avatar';
import { initials } from 'utils/string';
import RestaurantStaffAreaModal from './Restaurant-staffs/RestaurantStaffAreaModal';

const RestaurantStaffsWrapper = styled.div`
  .restaurant-staff {
    &__header {
      font-size: 21px;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      padding: 20px 10px;

      &__title {
        color: #333;
      }
      &__button {
        text-align: right;
      }
    }
    &__no-staff {
      text-align: center;
    }
  }
  @media only screen and (max-width: ${MOBILE_BREAK_POINT}px) {
    border-top: solid 1px rgb(217,217,217);
  }
`;

export function RestaurantStaffs(props) {
  const { } = props;
  // @ts-ignore
  const { id: restaurantId } = useParams();
  const [loading, setLoading] = useState(true);
  const [staffList, setStaffList] = useState([]);
  const [openStaffModal, setOpenStaffModal] = useState(false);
  const getStaffs = async () => {
    const response = await fetchAPI({
      method: 'GET',
      url: `${STAFF}?restaurantId=${restaurantId}`
    })
    if (response) {
      setStaffList(response.list);
      setLoading(false);
    }
  }
  useEffect(() => {
    getStaffs();
  }, [])
  if (loading) {
    return <RestaurantStaffsWrapper className="text-center">Loading...</RestaurantStaffsWrapper>
  }
  return (
    <RestaurantStaffsWrapper>
      <div className="restaurant-staff__header">
        <div><FormattedMessage {...messages.staffList} /> ({`${staffList.length}`})</div>
        <div className="restaurant-staff__header__button">
          <Button
            type="primary"
            shape="circle"
            onClick={() => setOpenStaffModal(true)}
          >
            <PlusCharacter />
          </Button>
        </div>
      </div>
      {
        staffList.length ? staffList.map(
          staff => <Staff staff={staff} getRestaurantStaffs={getStaffs} />
        ) : <div className="restaurant-staff__no-staff"><FormattedMessage {...messages.noStaff} /></div>
      }
      <RestaurantStaffModal
        onCancel={() => setOpenStaffModal(false)}
        visible={openStaffModal}
        getRestaurantStaffs={getStaffs}
        staffList={staffList}
      />
    </RestaurantStaffsWrapper>
  )
}

const StaffWrapper = styled.div`
  margin: 10px;
  display: flex;
  .staff {
    &__image {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
    }
    &__text {
      width: 65%;
      padding-left: 10px;
      &-main {
        font-size: 13px;
        font-weight: 700;
        color: #333;
      }
      &-minor {
        padding-top: 10px;
        font-size: 13px;
        color: #9C9696;
        display: -webkit-box;
        max-width: 200px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    &__delete {
      flex-grow: 1;
      text-align: right;
      position: relative;
      top: -9px;
    }
  }
`;

function Staff(props: { staff: StaffModel, getRestaurantStaffs: any }) {
  const { staff, getRestaurantStaffs } = props;
  const { firstName, lastName, roleNames, avatar } = staff;
  const [openStaffModal, setOpenStaffModal] = useState(false);
    // @ts-ignore
  const { id: restaurantId } = useParams();
  const handleOnDeleteStaff = async () => {
    const modifiedValues = { restaurantId: +restaurantId!, userId: staff.id } as any;
    const response = await fetchAPI({
      method: 'PUT',
      url: UNASSIGN_STAFF,
      data: modifiedValues,
    });
    if (response) {
      callBackRestaurantStaff();
    }
  }
    const callBackRestaurantStaff = () => {
    getRestaurantStaffs(restaurantId);
  };
  return (
    <>
      <div>
        <StaffWrapper>
          {avatar ? <img src={`${PUBLIC_API}/${avatar}`} className="staff__image"></img>
            : <Avatar className="staff__image" name={firstName} size="50" initials={initials}/>
          }
          <div className="staff__text">
            <div className="staff__text-main">{`${firstName || ''} ${lastName || ''}`}</div>
            <div className="staff__text-minor">
              {roleNames && roleNames.length && roleNames.map(roleName => <div>{roleName}</div>)}
            </div>
          </div>
          <span className="staff__delete"><DeletePopOver onDelete={handleOnDeleteStaff}  staff={staff} setOpenStaffModal={setOpenStaffModal} /></span>
          <RestaurantStaffAreaModal
            onCancel={() => setOpenStaffModal(false)}
            visible={openStaffModal}
            initialRestaurantStaff={staff}
            callBackRestaurantStaff={callBackRestaurantStaff}
          />
        </StaffWrapper>
        <Hr />
      </div>
    </>
  )
}