'for client'
import { useState } from "react"
import styled from "styled-components"
import { OrderItemTable } from "./OrderItemTable"

type OrderTableRowProps = {
    orderId:    number
    orderer:    string
	dateDue:    string
	datePlaced: string
	amountPaid: number
	orderTotal: number
	amountDue:  number
	filled:     boolean
	delivered:  boolean
}

const OrderRowContainer = styled.div`
    margin-bottom: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
`

const OrderFieldContainer = styled.div`
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
`

const OrderOverviewContainer = styled.div`
    display: inline-block;
    background-color:  #410041ff;
    width: 100%;

    &:hover {
        background-color: #920592ff;
        cursor: pointer;
    }
`

const OrderDetailsContainer = styled.div`
    display: inline-block;
    background-color:  #6e296eff;
    width: 100%;

    &:hover {
        background-color: #da51daff;
        color: #000;
        cursor: pointer;
    }
`

export const OrderTableRow = ({orderId, orderer, dateDue, datePlaced, amountDue, filled, delivered}: OrderTableRowProps) => {
    const dateDueDate = new Date(dateDue)
    const datePlacedDate = new Date(datePlaced)

    const [shouldShowDetails, setShouldShowDetails] = useState<boolean>(false)

    return (
        <li>
            <OrderRowContainer>
                <OrderOverviewContainer onClick={() => {
                    setShouldShowDetails(!shouldShowDetails)
                }}>
                    <OrderFieldContainer>
                        orderer: {orderer}
                    </OrderFieldContainer>
                    <OrderFieldContainer>
                        due: {dateDueDate.toLocaleDateString()}
                    </OrderFieldContainer>
                </OrderOverviewContainer>
                {shouldShowDetails && (
                    <>
                        <OrderDetailsContainer>
                            <OrderFieldContainer>
                                placed: {datePlacedDate.toLocaleDateString()}
                            </OrderFieldContainer>
                            <OrderFieldContainer>
                                balance: {(Math.trunc(amountDue * 100) / 100).toString()}
                            </OrderFieldContainer>
                            <OrderFieldContainer>
                                {filled ? delivered ? "delivered" : "undelivered" : "unfilled"}
                            </OrderFieldContainer>
                        </OrderDetailsContainer>
                        <OrderItemTable orderId={orderId} />
                    </>
                )}
            </OrderRowContainer>
        </li>
    )
}