'use client'
import ContentLayout from '@/components/ui/contentLayout'
import { SearchDiv, SearchFormLeft, SelectBox, SearchFormRight, Form, UiTable } from '@common/business_components/ui'
import ListDiv from '@common/business_components/ui/list_div'
import { Button } from '@common/components/ui'
import React, { type ReactNode } from 'react'
type TitleName = {
    mainTitle: string
    firstCardTitle: string
    secondCardTitle?: string
}
type SelectBox = {
    labelNm?: Label
    searchChk?: boolean
}
type Label = {
    first: string
    second: string
    third: string
    fourth: string
}
type BaseLayout = {
    children?: ReactNode[]
    titleName: TitleName
    form: any
    onSubmitEvent: Function
    graphBtn?: boolean
    firstDivBtn?: boolean
    searchBox?: SelectBox
}
// TODO: 나중에 이벤트 추가되면 파라미터 추가 필요 ?
/**
 * 
 * @param children 
 * @param titleName : 메인 타이틀, 첫번째 요소 타이틀, 두번째 요소 타이틀
 * @param form : zod 스키마
 * @param onSubmitEvent : 폼 이벤트 처리
 * @param graphBtn : 하단에 그래프 버튼 유무 처리
 * @returns 
 */
const BaseLayout = ({ children, titleName, form, onSubmitEvent, graphBtn = false, searchBox }: BaseLayout) => {
    return (
        <ContentLayout title={titleName.mainTitle}>
            <SearchDiv>
                <SearchFormLeft>
                    <SelectBox className="col-span-2" label={searchBox?.labelNm?.first ?? ''} selectArray={[{ text: '한강 유역청', val: '1' }]} onSelectValue={(val) => { }} selectClass={undefined} />
                    <SelectBox label={searchBox?.labelNm?.second ?? ''} selectArray={[{ text: '경기도', val: '1' }]} className="col-span-2" onSelectValue={() => { }} selectClass='' />
                    <SelectBox label={searchBox?.labelNm?.third ?? ''} selectArray={[{ text: '양평군', val: '1' }]} className="col-span-3" onSelectValue={() => { }} selectClass='' />
                    <SelectBox label={searchBox?.labelNm?.fourth ?? ''} selectArray={[{ text: '양평하수처리장', val: '1' }]} className="col-span-3" onSelectValue={() => { }} selectClass='' />
                </SearchFormLeft>
                {searchBox?.searchChk ? <SearchFormRight><Button>조회</Button></SearchFormRight> : null}
            </SearchDiv>
            <ListDiv>
                <div className="card-header">
                    <h3 className="text-2xl font-medium">{titleName.firstCardTitle}</h3>
                    <div>
                        {graphBtn ? <Button className="!mr-[1.2rem]">다운로드</Button> : null}
                        {/* 그래프 있을 시 */}
                        {graphBtn ? <Button className="!mr-[1.2rem]">삭제</Button> : null}
                    </div>
                </div>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmitEvent)}>
                        <div className="card !m-[1.2rem]">
                            {/* 폼 정보 입력 칸 */}
                            {children?.[0]}
                        </div>
                    </form>
                </Form>
            </ListDiv>
            {children?.[1] != null ? <ListDiv>
                <div className="card-header flex items-center justify-between">
                    <h3 className="text-2xl font-medium">{titleName?.secondCardTitle}</h3>
                    <div>
                    {graphBtn ? <Button className="!mr-[1.2rem]">다운로드</Button> : null}
                    {/* 그래프 있을 시 */}
                    {graphBtn ? <Button className="!mr-[1.2rem]">삭제</Button> : null}
                </div>
                </div>
                <div className="card !m-[1.2rem]">{children?.[1]}</div>
            </ListDiv> : null}
        </ContentLayout>
    )
}

export default BaseLayout