import {FC, ReactNode, useEffect, useState} from "react";
import {View} from "@tarojs/components";
import Icon from "@/components/icon";
import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
import Img from "@/components/image/image";

interface Props {
  height?: number | string
  title: string
  content?: string | ReactNode
  chevron?: boolean
  image?: string
  isProp?: boolean
  children?: ReactNode
  show?: boolean
  onClick?: () => void
  no_border?: boolean
  leftImage?: string
}

const PopPut: FC<Props> = ({title, chevron, content, image, isProp, children, show, ...opt}: Props) => {
  const [PageShow, setShow] = useState(false)

  useEffect(() => {
    if (PageShow) {
      setShow(false)
    }
  }, [show])

  function click() {
    setShow(true)
    opt.onClick?.()
  }

  const style = (): string => {
    let css = ''
    if (opt.height) {
      css += ` height:${opt.height}px;font-size:16px`
    }
    if (opt.no_border) {
      css += ` border:none`
    }
    return css
  }

  return (
    <>
      <View className='card' onClick={click} style={style()}>
        <View className='flex align-center'>
          {opt.leftImage != null && <Img width={68} height={68} src={opt.leftImage} className='mr-3' mode='aspectFit'/>}
          <View>{title}</View>
        </View>
        <View className='card-content'>
          <View>{content}</View>
          {!chevron && <Icon name='chevron-right'/>}
          {image && <Img src={image} mode='scaleToFill' className='image' width={68} height={68}/>}
        </View>
      </View>
      {
        isProp
        && <CustomPageContainer show={PageShow} position='bottom' round onClickOverlay={() => setShow(false)}>
          {children}
        </CustomPageContainer>
      }
    </>
  )
}

export default PopPut