import React, { useEffect, useRef, useState } from 'react'
import { Select, Space, ConfigProvider, Popover } from 'antd'
import styles from './style.module.css'
import Image from 'next/image'

interface popover {
    title: string
    content: string
}
interface select {
    value: string
    label: string
    popover?: popover
}

interface SelectProps {
    value?: string
    onChange: (value: string) => void
    options?: select[]
    label?: string
    labelMode?: LabelMode
    refersh?: (() => void) | null
    mode?: any
}

export type LabelMode = 'header' | 'inline'

const CustomSelect = ({
    onChange,
    value,
    options,
    label,
    labelMode = 'header',
    refersh,
    mode,
}: SelectProps) => {
    const componentRef = useRef<HTMLDivElement>(null)
    const [maxLabelWidth, setMaxLabelWidth] = useState(344)

    useEffect(() => {
        if (componentRef.current) {
            const width = componentRef.current.offsetWidth
            setMaxLabelWidth(width - 100)
        }
    }, [])

    return (
        <div
            className={`${styles.selectItem} ${
                labelMode === 'inline' ? styles.selectItemInline : ''
            }`}
        >
            {label ? (
                <p
                    className={
                        labelMode === 'inline'
                            ? `ag14 ${styles.titleInline}`
                            : `ag14-t ${styles.title}`
                    }
                >
                    {label}
                </p>
            ) : null}
            <Space wrap className={styles.wrap} ref={componentRef}>
                <ConfigProvider
                    theme={{
                        token: {
                            colorBgContainer: 'var(--FillColor6)',
                            colorText: 'var(--TextColor1)',
                            fontSize: 14,
                            controlHeight: 48,
                            controlOutlineWidth: 1,
                            controlPaddingHorizontal: 12,
                        },
                    }}
                >
                    <Select
                        mode={mode}
                        value={value}
                        style={{ width: 120 }}
                        onChange={(value) => {
                            onChange(value)
                        }}
                        className={`${styles.selectContent} ${
                            mode === 'multiple' ? styles.multipleSelectContent : ''
                        }`}
                        options={options?.map((item) => {
                            return {
                                value: item.value,
                                label: (
                                    <div className={styles.selectLabel}>
                                        <span
                                            className={`${styles.textLabel}`}
                                            style={{ maxWidth: `${maxLabelWidth}px` }}
                                        >
                                            {item.label}
                                        </span>
                                        {item.popover && item.popover.content ? (
                                            <Popover
                                                placement={'rightTop'}
                                                title={item.popover.title}
                                                overlayClassName={styles.popover}
                                                content={
                                                    <div className={styles.popoverContent}>
                                                        {item.popover.content}
                                                    </div>
                                                }
                                                zIndex={2050}
                                                trigger={'hover'}
                                            >
                                                <div className={`${styles.info} info`}>
                                                    <Image
                                                        src={'/checkpoint_info.svg'}
                                                        height={16}
                                                        width={16}
                                                        alt="info"
                                                    ></Image>
                                                </div>
                                            </Popover>
                                        ) : null}
                                    </div>
                                ),
                            }
                        })}
                        suffixIcon={
                            <Image src={'/arrow_down.svg'} width={14} height={14} alt="drop_down" />
                        }
                    />
                    {refersh ? (
                        <Image
                            className={styles.refresh}
                            height={48}
                            width={48}
                            src="/ic_sd_refresh.svg"
                            alt="refresh"
                            onClick={refersh}
                        ></Image>
                    ) : null}
                </ConfigProvider>
            </Space>
        </div>
    )
}

export default CustomSelect
