/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unused-vars */
import styles from './estate-card.module.scss'
import property from '../../../../../images/property.png'
import { BiSolidEdit } from "react-icons/bi";
import { MdDelete } from "react-icons/md";
import DeleteConfirmationModal from '../../Modals/DeleteConfirmationModal';
import AddEstatePlan from '../../Modals/AddEstatePlan';
import { useState } from 'react';
import { useForm } from '@inertiajs/react';


const EstatePlanCard = ({ estate }: any) => {
const { id, name, price_per_unit, min_units, investors_count, isSoldOut, description, roi, duration } = estate

  const [deleteModal, setDeleteModal] = useState(false)
  const [updateModal, setUpdateModal] = useState(false)

  const toggleDeleteModal = () => {
    setDeleteModal(!deleteModal)
  }

  const toggleUpdateModal = () => {
    setUpdateModal(!updateModal)
  }

  const form = useForm({})

  function deleteEstatePlan(id: string) {
    form.delete(`/estate/${id}`)

    toggleDeleteModal()
  }
  return (
    <>
     { deleteModal ? 
          <DeleteConfirmationModal 
              closeModal={toggleDeleteModal}
              handleDelete={() => deleteEstatePlan(id)}
              id={id} 
              title="Delete Estate Plan"
              description={ `You are about to delete an estate plan with id ${id} and this will no longer be available to your users. Please confirm before proceeding` }
          /> : null  
      }

    { updateModal ? 
      <AddEstatePlan 
          closeModal={toggleUpdateModal} 
          type="edit" 
          estate={estate} 
      />

      : null
    }

    <div className={styles['estate__card']}>
      <img src={property} alt="Property thumbnail" />
      <div className={styles['estate__card__details']}>
        <h1>{ name }</h1>
        <small>
          <strong>{roi}%</strong> p.a expected returns
        </small>
        <div className={styles['estate__card__details__grid']}>
          <div className={styles['estate__card__details__grid--item']}>
            <h5>${Number(price_per_unit).toLocaleString('en-US')}</h5>
            <small>Per Unit</small>
          </div>
          <div className={styles['estate__card__details__grid--item']}>
            <h5>{investors_count}</h5>
            <small>Investors</small>
          </div>
        </div>
        <div
          className={
            isSoldOut ? styles['estate__card__details__sold'] : styles['estate__card__details__active']
          }
        >
          {isSoldOut ? 'Sold Out' : 'Active'}
        </div>
      </div>

      <div className={styles['estate__card--actions']}> 

      <div onClick={ toggleUpdateModal } className={styles['estate__card--actions--edit']}>Update &nbsp; <BiSolidEdit /></div>

      <div onClick={ toggleDeleteModal } className={styles['estate__card--actions--delete']}>Delete &nbsp; <MdDelete /></div>
      </div>
    </div>
    </>
  )
}

export default EstatePlanCard