import { useState } from "react";
import DescriptionRow from "../elements/DescriptionRow";
import Disclosure from "../elements/Disclosure";

const DetailAddress = ({ address }) => {
  const fullAddress = [];
  if (address?.street) fullAddress.push(address.street);
  if (address?.sub_district?.name) fullAddress.push(address.sub_district.name);
  if (address?.district?.name) fullAddress.push(address.district.name);
  if (address?.city?.name) fullAddress.push(address.city.name);
  return (
    <div className="p-4 flex flex-col gap-y-4">
      <DescriptionRow label="Nama">{ address?.name }</DescriptionRow>
      <DescriptionRow label="Email">{ address?.email || '-' }</DescriptionRow>
      <DescriptionRow label="No Telepon">{ address?.mobile || '-' }</DescriptionRow>
      <DescriptionRow label="Alamat">{ fullAddress.join(', ') }</DescriptionRow>
    </div>
  );
};

const TransactionDetailAddress = ({ transaction }) => {
  const [ activeSection, setActiveSection ] = useState({
    purchase: false,
    shipping: false,
    invoice: false,
  });

  const toggleSection = ( name ) => {
    setActiveSection({
      ...activeSection,
      [name]: !activeSection[name] 
    });
  };

  return (
    <div className="m-4 rounded-md border border-gray_r-6 divide-y divide-gray_r-6">
      <Disclosure 
        label="Detail Pelanggan" 
        active={activeSection.purchase} 
        onClick={() => toggleSection('purchase')} 
      />
      { activeSection.purchase && (
        <DetailAddress address={transaction?.address?.customer} />
      ) }

      <Disclosure 
        label="Detail Pengiriman" 
        active={activeSection.shipping} 
        onClick={() => toggleSection('shipping')} 
      />
      { activeSection.shipping && (
        <DetailAddress address={transaction?.address?.shipping} />
      ) }

      <Disclosure 
        label="Detail Penagihan" 
        active={activeSection.invoice} 
        onClick={() => toggleSection('invoice')} 
      />
      { activeSection.invoice && (
        <DetailAddress address={transaction?.address?.invoice} />
      ) }
    </div>
  );
};

export { TransactionDetailAddress };