/**
 * @format
 */
import React, {useMemo} from 'react'
import {
  Heading,
  Box,
  Container,
  Text,
  Link,
  FormControl,
  FormLabel,
  Input,
  Select,
  InputGroup,
  InputRightAddon,
  HStack,
  Button,
  Divider
} from '@chakra-ui/react'

import MOCK_DATA from '../MOCK_DATA.json'
import {VantageDataTable} from '../components/VantageDataTable'

const ProxyPrice = () => {
  const data = useMemo(() => MOCK_DATA, [])

  return (
    <Container maxW="7xl" mt="30px">
      <Box mb="5">
        <Heading
          as="h1"
          fontSize="20"
          fontWeight="700"
          mb="2"
          lineHeight="20px"
        >
          ProxyPrice
        </Heading>
        <Text fontSize="16">
          ProxyPriceTM utilizes a proprietary model based on a combination of
          the Comparison Method of Valuation and a Multiple Regression Analysis.
        </Text>
        <Link color="#E03C31" fontSize="16">
          Learn More
        </Link>
      </Box>

      <Box mb="44px">
        <form>
          <Heading as="h3" fontSize="18" mb="3">
            Get ProxyPrice
            <Text as="sup" fontSize="50%">
              TM
            </Text>{' '}
            for
          </Heading>
          <FormControl maxW="2xl" mx="auto">
            <FormLabel htmlFor="state" fontSize="14" fontWeight="700">
              State
            </FormLabel>
            <Select placeholder="Select state" id="state" mb="4">
              <option value="Selangor">Selangor</option>
              <option value="Perak">Perak</option>
              <option value="Johor">Johor</option>
            </Select>
            <FormLabel htmlFor="project" fontSize="14" fontWeight="700">
              Project/Scheme Name
            </FormLabel>
            <Input
              id="project"
              type="text"
              placeholder="Project/Scheme Name"
              mb="4"
            />
            <FormLabel htmlFor="address" fontSize="14" fontWeight="700">
              Address
            </FormLabel>
            <Input id="address" type="text" placeholder="Address" mb="4" />
            <FormLabel htmlFor="property" fontSize="14" fontWeight="700">
              Property Type
            </FormLabel>
            <Select placeholder="Select Property Type" id="property" mb="4">
              <option value="Serviced Apartment">Serviced Apartment</option>
              <option value="Landed">Landed</option>
              <option value="Apartment">Apartment</option>
            </Select>
          </FormControl>
          <Heading as="h3" fontSize="18" mb="3">
            Property Size
          </Heading>
          <FormControl maxW="2xl" mx="auto">
            <HStack spacing="5" mb="9">
              <Box width="50%">
                <FormLabel htmlFor="builtup" fontSize="14" fontWeight="700">
                  Built-up Area
                </FormLabel>
                <InputGroup>
                  <Input
                    id="project"
                    type="text"
                    placeholder="Built-up Area"
                    mb="4"
                  />
                  <InputRightAddon children="sqft" />
                </InputGroup>
              </Box>
              <Box width="50%">
                <FormLabel htmlFor="land" fontSize="14" fontWeight="700">
                  Land Area
                </FormLabel>
                <InputGroup>
                  <Input
                    id="address"
                    type="text"
                    placeholder="Land Area"
                    mb="4"
                  />
                  <InputRightAddon children="sqft" />
                </InputGroup>
              </Box>
            </HStack>
            <HStack spacing="8">
              <Button
                _hover={{bg: 'black'}}
                color="white"
                background="#E03C31"
                type="submit"
              >
                Get ProxyPrice
              </Button>
              <Button color="#1F2A37" variant="link">
                Clear All
              </Button>
            </HStack>
          </FormControl>
        </form>
      </Box>

      <Divider />

      <Box mt="8" mb="70px">
        <Heading as="h3" fontSize="20" mb="44px" fontWeight="700">
          Reference Property
        </Heading>
        <HStack py="3" spacing="30px">
          <Box width="250px">
            <Text fontSize="14px" color="#6B7280" textTransform="uppercase">
              Address
            </Text>
          </Box>
          <Box>
            <Text fontSize="16px" color="##111928" textTransform="uppercase">
              16-27, jalan kerinchi kiri 2, southview residence
            </Text>
          </Box>
        </HStack>
        <Divider />
        <HStack py="3" spacing="30px">
          <Box width="250px">
            <Text fontSize="14px" color="#6B7280" textTransform="uppercase">
              Transaction Price
            </Text>
          </Box>
          <Box>
            <Text fontSize="16px" color="##111928" textTransform="uppercase">
              RM490,000
            </Text>
          </Box>
        </HStack>
        <Divider />
        <HStack py="3" spacing="30px">
          <Box width="250px">
            <Text fontSize="14px" color="#6B7280" textTransform="uppercase">
              Transaction Date
            </Text>
          </Box>
          <Box>
            <Text fontSize="16px" color="##111928" textTransform="uppercase">
              09-dec-2021
            </Text>
          </Box>
        </HStack>
        <Divider />
        <HStack py="3" spacing="30px">
          <Box width="250px">
            <Text fontSize="14px" color="#6B7280" textTransform="uppercase">
              Project Name
            </Text>
          </Box>
          <Box>
            <Text fontSize="16px" color="##111928" textTransform="uppercase">
              Southview Residence
            </Text>
          </Box>
        </HStack>
        <Divider />
        <HStack py="3" spacing="30px">
          <Box width="250px">
            <Text fontSize="14px" color="#6B7280" textTransform="uppercase">
              Property Group
            </Text>
          </Box>
          <Box>
            <Text fontSize="16px" color="##111928" textTransform="uppercase">
              Commercial
            </Text>
          </Box>
        </HStack>
        <Divider />
        <HStack py="3" spacing="30px">
          <Box width="250px">
            <Text fontSize="14px" color="#6B7280" textTransform="uppercase">
              State
            </Text>
          </Box>
          <Box>
            <Text fontSize="16px" color="##111928" textTransform="uppercase">
              W.p Kuala Lumpur
            </Text>
          </Box>
        </HStack>
        <Divider />
        <HStack py="3" spacing="30px">
          <Box width="250px">
            <Text fontSize="14px" color="#6B7280" textTransform="uppercase">
              Town
            </Text>
          </Box>
          <Box>
            <Text fontSize="16px" color="##111928" textTransform="uppercase">
              Mukim Kuala Lumpur
            </Text>
          </Box>
        </HStack>
        <Divider />
        <HStack py="3" spacing="30px">
          <Box width="250px">
            <Text fontSize="14px" color="#6B7280" textTransform="uppercase">
              Property Type
            </Text>
          </Box>
          <Box>
            <Text fontSize="16px" color="##111928" textTransform="uppercase">
              Serviced Apartment
            </Text>
          </Box>
        </HStack>
        <Divider />
        <HStack py="3" spacing="30px">
          <Box width="250px">
            <Text fontSize="14px" color="#6B7280" textTransform="uppercase">
              Lot Area (sqft) /Built-up (sqft)
            </Text>
          </Box>
          <Box>
            <Text fontSize="16px" color="##111928" textTransform="uppercase">
              592/592
            </Text>
          </Box>
        </HStack>
        <Divider />
        <HStack py="3" spacing="30px">
          <Box width="250px">
            <Text fontSize="14px" color="#6B7280" textTransform="uppercase">
              Price (per sqft/sqm)
            </Text>
          </Box>
          <Box>
            <Text fontSize="16px" color="##111928" textTransform="uppercase">
              827.67/8,909.09
            </Text>
          </Box>
        </HStack>
        <Divider />
      </Box>

      <Box mt="8">
        <Heading as="h3" fontSize="20" mb="28px" fontWeight="700">
          Comparable Transaction History
        </Heading>
        <VantageDataTable data={data} />
      </Box>
    </Container>
  )
}

export default ProxyPrice