import React, { useState } from "react";
import { Col } from "react-bootstrap";
import EditCarrierProfile from "../form/EditCarrierProfile";
export default function RegionBox(props: any) {
  
  const [isViewLogOpen, setViewLogOpen] = useState(false);
  let res = props?.propData?.data?.details?.personal_info_country?.markets?.map(
    (i) => i.market
  );
  let resstates = props?.propData?.data?.details?.personal_info_country?.state_names?.map((i) => i.name)
  let resTerminal = props?.propData?.data?.details?.personal_info_country?.terminal_names?.map(
    (i) => i.name
  );
  function jsxFunContent() {
    return (
      <span className='edit__btn'>
        <i onClick={() => setViewLogOpen(true)} className='bi bi-pen'>
          Edit
        </i>
      </span>
    );
  }
  const InfoCard = ({ title, data2 }) => (
    <Col>
      <div className='card_body'>
        <h5 className='g-1 mb-1'>{title}</h5>
        {data2?.map((item: any) => <p key={item}>{item}</p>)}
      </div>
    </Col>
  );

  return (
    <div className='region-box-div' >
      {jsxFunContent(setViewLogOpen)}

      <div className='row row-cols-1 row-cols-md-3 g-4'>
        <InfoCard title='State' data2={resstates} />
        <InfoCard title='Markets' data2={res} />
        <InfoCard title='Terminals' data2={resTerminal} />
      </div>
      <div className={isViewLogOpenScopeCheck(isViewLogOpen)}>
        {isViewLogOpen && (
          <EditCarrierProfile
            onClose={() => {
              setViewLogOpen(false);
            }}
            userCarrierId={props?.propData?.data?.details?.carrier_id}
            refresh={props?.refresh}
          />
        )}
      </div>
    </div>
  );
}
function isViewLogOpenScopeCheck(isViewLogOpen: boolean): string | undefined {
  return `${isViewLogOpen ? "overlay" : ""}`;
}