import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import IMG_RESTAURANT from '../../../images/restaurant-placeholder.svg';
import {
  LocationIcon,
  PhoneIcon,
  EmailIcon,
  EditIcon,
} from 'styles/icon-components';
import { useParams } from 'react-router-dom';
import { fetchAPI, replaceUrl } from 'utils/fetchAPI';
import { PUBLIC_API, RESTAURANT_BY_ID_URL } from 'containers/App/urls';
import { RestaurantModel } from '../Store/types';
import SK_RESTAURANT_INFO from '../../../images/sk-restaurant-info.svg';
import { EditButtonIcon } from 'styles/custom-styled-components';
import { UpdateRestauranInfoModal } from './Restaurant-infos';
import messagesGlobal from 'translations/messages';
import { FormattedMessage } from 'react-intl';
import { Switch } from 'antd';
import { MOBILE_BREAK_POINT, BLACK_COLOR } from 'styles/constants';
import { extractPhoneNumber } from 'utils/common';

const RestaurantInfosWrapper = styled.div`
  display: flex;
  height: 220px;
  .restaurant-infos {
    &__image {
      width: 40%;
      padding: 10px;
      img {
        width: 100%;
        height: 200px;
      }
    }
    &__title {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
    &__text {
      width: 60%;
      padding-left: 10px;
      font-size: 15px;
      &__main {
        color: #333;
        font-size: 15px;
        font-weight: 600;
        padding: 24px 0px;
      }
      &__minor {
        padding-bottom: 18px;
      }
    }
    &__edit-button {
      width: 60px;
      height: 60px;
    }
  }
  @media only screen and (max-width: 768px) {
    height: 180px;
    .restaurant-infos {
      &__title {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
      }
      &__image {
        width: 40%;
        padding: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &__text {
        width: 60%;
        padding-left: 10px;
        font-size: 13px;
        &__main {
          color: #333;
          font-size: 13px;
          font-weight: 700;
          padding: 12px 0px;
        }
        &__minor {
          padding-bottom: 9px;
        }
      }
      &__edit-button {
        width: 60px;
        height: 60px;
      }
    }
  }
  @media only screen and (max-width: ${MOBILE_BREAK_POINT}px) {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    .restaurant-infos {
      &__image {
        width: 100%;
        padding: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &__title {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
      }
      &__text {
        width: 100%;
        padding-left: 10px;
        font-size: 13px;
        line-height: 20px;
        &__main {
          color: #333;
          font-size: 13px;
          font-weight: 700;
          padding: 12px 0px;
        }
        &__minor {
          padding-bottom: 9px;
        }
      }
      &__edit-button {
        width: 60px;
        height: 60px;
      }
    }
  }
`;
export function RestaurantInfo(props) {
  // @ts-ignore
  const { id } = useParams();
  const [restaurantDetails, setRestaurantDetails] = useState<RestaurantModel>();
  const [
    status,
    setStatus,
  ] = useState(false);
  const [
    openUpdateRestaurantInfoModal,
    setOpenUpdateRestaurantInfoModal,
  ] = useState(false);
  const changeStatus = async value => {
    const response = await fetchAPI({
      method: 'PUT',
      url: replaceUrl(RESTAURANT_BY_ID_URL, { id }),
      formData: false,
      data: {isPublic: value},
    });
    if (response) {
      setStatus(value);
    }
  };
  const getRestaurantDetail = async () => {
    const response = await fetchAPI({
      method: 'GET',
      url: replaceUrl(RESTAURANT_BY_ID_URL, { id }),
    });
    if (response) {
      const [code, number] = extractPhoneNumber(response.phoneNumber, response.phoneCountryCode);
      response.phoneNumber= number;
      response.phoneCountryCode = code;
      setRestaurantDetails(response);
      setStatus(response.isPublic);  
    }
  };
  useEffect(() => {
    getRestaurantDetail();
  }, []);
  if (!restaurantDetails) {
    return (
      <RestaurantInfosWrapper>
        <img
          src={SK_RESTAURANT_INFO}
          width="100%"
          style={{ objectFit: 'cover' }}
        />
      </RestaurantInfosWrapper>
    );
  }
  const {
    name,
    fullAddress,
    phoneNumber,
    phoneCountryCode,
    email,
    photo,
  } = restaurantDetails;
  return (
    <RestaurantInfosWrapper>
      <div className="restaurant-infos__image">
        <img
          src={!photo ? IMG_RESTAURANT : `${PUBLIC_API}/${photo}`}
          style={{ objectFit: !photo ? 'contain' : 'cover' }}
        />
      </div>
      <div className="restaurant-infos__text">
        <div className="restaurant-infos__title">
          <div className="restaurant-infos__text__main">{name}</div>
          <div
            className="restaurant-infos__edit-button"
            onClick={() => setOpenUpdateRestaurantInfoModal(true)}
          >
            <EditButtonIcon />
          </div>
        </div>
        {fullAddress && (
          <div className="restaurant-infos__text__minor">
            <LocationIcon />
            {fullAddress}
          </div>
        )}
        {phoneNumber && (
          <div className="restaurant-infos__text__minor">
            <PhoneIcon />
            {phoneCountryCode}{phoneNumber}
          </div>
        )}
        {email && (
          <div className="restaurant-infos__text__minor">
            <EmailIcon />
            {email}
          </div>
        )}
        <div className="restaurant-infos__text__minor">
          <Switch checked={status} onChange={changeStatus} style={{marginRight: '15px'}} />
          <span style={{color: status ? '#9CD339' : '#9C9696'}}>
            {status ? (
              <FormattedMessage {...messagesGlobal.activating} />
            ) : (
              <FormattedMessage {...messagesGlobal.stop} />
            )}
          </span>
        </div>
      </div>
      <UpdateRestauranInfoModal
        visible={openUpdateRestaurantInfoModal}
        onCancel={() => setOpenUpdateRestaurantInfoModal(false)}
        getRestaurantDetail={getRestaurantDetail}
        restaurantDetails={restaurantDetails}
      />
    </RestaurantInfosWrapper>
  );
}