import { get } from '@/rtk/helpers/apiService'
import {
  Badge,
  Box,
  Button,
  Card,
  Center,
  Group,
  Image,
  Loader,
  Text,
} from '@mantine/core'
import { IconCheck } from '@tabler/icons-react'
import { useEffect, useState } from 'react'
import classes from './HomeContent.module.css'

const HomeContent = () => {
  type param = {
    name: string
    value: string
  }
  type item = {
    id: number | null
    name: string
    price: string
    unit: string
    params: param[]
  }
  type ResData = {
    data: {
      items: item[]
    }
    mess: string
  }

  const [data, setData] = useState<item[]>([])

  const getHostingInfo = async () => {
    try {
      const res: ResData = await get(
        'http://localhost:8000/api/v1/hostBill/hosting',
        {},
      )
      if (res?.mess === 'good') {
        setData(res.data.items)
        console.log(res.data)
      }
    } catch (error) {
      console.log(error)
    }
  }
  // const dispatch = useAppDispatch()

  // const [data, setData] = useState<Array<unknown> | null>(null)
  // type item = {
  //     PID: string,
  //     SN: string,
  //     VID: string,
  //     fileName: string,
  //     warehouse: string,
  //     line: string[]
  // }

  // const data:{payload?:item[]|[], length:number} = useAppSelector(selectData)

  // const getData = useCallback(async () => {
  //     const res = await axios.post('https://logs.danielvu.com/api/getIndexSerialNumber', {
  //         from: 20231109, to: 20231109
  //     }, { headers: { Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZF91c2VyIjoxLCJ1c2VybmFtZSI6ImVycHVzZXIiLCJjcmVhdGVkQXQiOiIyMDIzLTA4LTIzVDE1OjI4OjAxLjAwMCsxMDowMCIsInVwZGF0ZWRBdCI6IjIwMjMtMDgtMjNUMTU6Mjg6MDEuMDAwKzEwOjAwIiwiaWF0IjoxNjk1MjY0NTQwLCJleHAiOjE3MjY4MDA1NDB9.vBlZAc7TGKbOrsP7UjQzVY2hIoJCGXQDe3KUxYyv294' } })

  //     // setData(res.data)
  //     window.store.dispatch({type : "data/success", payload:{payload:res.data}})
  //     // dispatch()
  // }, [dispatch])

  // console.log(data)

  useEffect(() => {
    // if (data && data.length === 0) (
    // getData()
    // )

    getHostingInfo()
  }, [])

  return (
    <Box display={'flex'} style={{ justifyContent: 'space-evenly' }}>
      {data.length > 0 ? (
        data?.map((i) => (
          <Card withBorder radius="md" className={classes.card}>
            <Card.Section className={classes.imageSection}>
              <Image
                src="https://voicefpt.com.vn/wp-content/uploads/2020/02/shared-hosting-voicefpt.jpeg"
                alt="Tesla Model S"
                w={'60%'}
              />
            </Card.Section>

            <Group justify="space-between" mt="md">
              <div>
                <Text fw={700} fz={'xl'}>
                  {i.name}
                </Text>
                <Text fz="xs" c="dimmed">
                  Quickly setup your prefered plan
                </Text>
              </div>
              <Badge variant="outline">25% off</Badge>
            </Group>

            <Card.Section className={classes.section} mt="md">
              <Text fz="sm" c="dimmed" className={classes.label}>
                Basic configuration
              </Text>

              <Group
                gap={8}
                mb={-8}
                display={'flex'}
                style={{ flexFlow: 'column' }}
                ta={'left'}
              >
                {i.params.map((p) => (
                  <Box display={'flex'} style={{ float: 'left' }} w={'100%'}>
                    <IconCheck width={20} color="green" />
                    <Center key={p.name} ml={'1rem'}>
                      {/* <feature.icon size="1.05rem" className={classes.icon} stroke={1.5} /> */}
                      <Text size="xs">
                        {p.name}: <b>{p.value}</b>
                      </Text>
                    </Center>
                  </Box>
                ))}
              </Group>
            </Card.Section>

            <Card.Section className={classes.section}>
              <Group gap={30}>
                <div>
                  <Text fz="xl" fw={700} style={{ lineHeight: 1 }}>
                    {i.price}
                  </Text>
                  <Text
                    fz="sm"
                    c="dimmed"
                    fw={500}
                    style={{ lineHeight: 1 }}
                    mt={3}
                  >
                    {i.unit}
                  </Text>
                </div>

                <Button radius="xl" style={{ flex: 1 }}>
                  Rent now
                </Button>
              </Group>
            </Card.Section>
          </Card>
        ))
      ) : (
        <Loader size={40} mt={'15%'} />
      )}
    </Box>
  )
}

export default HomeContent
