/*
 * Copyright (c) 2022, Salesforce, Inc.
 * All rights reserved.
 * SPDX-License-Identifier: BSD-3-Clause
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
 */

import React, {useEffect} from 'react'
import {useIntl, FormattedMessage} from 'react-intl'
import {useLocation} from 'react-router-dom'

// Components
import {
    Box,
    Button,
    SimpleGrid,
    HStack,
    VStack,
    Text,
    Flex,
    Stack,
    Container,
    Link,
    Heading
} from '@salesforce/retail-react-app/app/components/shared/ui'

// Project Components
import Hero from '@salesforce/retail-react-app/app/components/hero'
import Seo from '@salesforce/retail-react-app/app/components/seo'
import Section from '@salesforce/retail-react-app/app/components/section'
import ProductScroller from '@salesforce/retail-react-app/app/components/product-scroller'
import Island from '@salesforce/retail-react-app/app/components/island'

// Others
import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
import {heroFeatures, features} from '@salesforce/retail-react-app/app/pages/home/data'

//Hooks
import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
import useDataCloud from '@salesforce/retail-react-app/app/hooks/use-datacloud'

// Constants
import {
    HOME_SHOP_PRODUCTS_CATEGORY_ID,
    HOME_SHOP_PRODUCTS_LIMIT,
    MAX_CACHE_AGE,
    STALE_WHILE_REVALIDATE
} from '@salesforce/retail-react-app/app/constants'
import {useServerContext} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
import {useProductSearch} from '@salesforce/commerce-sdk-react'

/**
 * This is the home page for Retail React App.
 * The page is created for demonstration purposes.
 * The page renders SEO metadata and a few promotion
 * categories and products, data is from local file.
 */
const Home = () => {
    const intl = useIntl()
    const einstein = useEinstein()
    const dataCloud = useDataCloud()
    const {pathname} = useLocation()

    const {res} = useServerContext()
    if (res) {
        res.set(
            'Cache-Control',
            `s-maxage=${MAX_CACHE_AGE}, stale-while-revalidate=${STALE_WHILE_REVALIDATE}`
        )
    }

    const {data: productSearchResult, isLoading} = useProductSearch({
        parameters: {
            allImages: true,
            allVariationProperties: true,
            expand: ['promotions', 'variations', 'prices', 'images', 'custom_properties'],
            limit: HOME_SHOP_PRODUCTS_LIMIT,
            perPricebook: true,
            refine: [`cgid=${HOME_SHOP_PRODUCTS_CATEGORY_ID}`, 'htype=master']
        }
    })

    /**************** Einstein ****************/
    useEffect(() => {
        einstein.sendViewPage(pathname)
        dataCloud.sendViewPage(pathname)
    }, [])

    return (
        <Box data-testid="home-page" layerStyle="page">
            <Heading as="h1" srOnly>
                <FormattedMessage defaultMessage="Home" id="home.title.home" />
            </Heading>
            <Seo
                title="Home Page"
                description="Commerce Cloud Retail React App"
                keywords="Commerce Cloud, Retail React App, React Storefront"
            />

            <Island hydrateOn={'visible'}>
                <Hero
                    title={intl.formatMessage({
                        defaultMessage: 'The React PWA Starter Store for Retail',
                        id: 'home.title.react_starter_store'
                    })}
                    img={{
                        src: getAssetUrl('static/img/hero.png'),
                        alt: 'npx pwa-kit-create-app',
                        fetchPriority: 'high'
                    }}
                    actions={
                        <Stack spacing={{base: 4, sm: 6}} direction={{base: 'column', sm: 'row'}}>
                            <Button
                                as={Link}
                                href="https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/getting-started.html"
                                target="_blank"
                                width={{base: 'full', md: 'inherit'}}
                                paddingX={7}
                                _hover={{textDecoration: 'none'}}
                            >
                                <FormattedMessage
                                    defaultMessage="Get started"
                                    id="home.link.get_started"
                                />
                            </Button>
                        </Stack>
                    }
                />
            </Island>

            <Island hydrateOn={'visible'}>
                <Section
                    background={'gray.50'}
                    marginX="auto"
                    paddingY={{base: 8, md: 16}}
                    paddingX={{base: 4, md: 8}}
                    borderRadius="base"
                    width={{base: '100vw', md: 'inherit'}}
                    position={{base: 'relative', md: 'inherit'}}
                    left={{base: '50%', md: 'inherit'}}
                    right={{base: '50%', md: 'inherit'}}
                    marginLeft={{base: '-50vw', md: 'auto'}}
                    marginRight={{base: '-50vw', md: 'auto'}}
                >
                    <SimpleGrid
                        columns={{base: 1, md: 1, lg: 3}}
                        spacingX={{base: 1, md: 4}}
                        spacingY={{base: 4, md: 14}}
                    >
                        {heroFeatures.map((feature, index) => {
                            const featureMessage = feature.message
                            return (
                                <Link key={index} target="_blank" href={feature.href}>
                                    <Box
                                        background={'white'}
                                        boxShadow="0px 2px 2px rgba(0, 0, 0, 0.1)"
                                        borderRadius={'4px'}
                                    >
                                        <HStack>
                                            <Flex
                                                paddingLeft={6}
                                                height={24}
                                                align={'center'}
                                                justify={'center'}
                                            >
                                                {feature.icon}
                                            </Flex>
                                            <Text fontWeight="700">
                                                {intl.formatMessage(featureMessage.title)}
                                            </Text>
                                        </HStack>
                                    </Box>
                                </Link>
                            )
                        })}
                    </SimpleGrid>
                </Section>
            </Island>

            {productSearchResult && (
                <Island hydrateOn={'visible'}>
                    <Section
                        padding={4}
                        paddingTop={16}
                        title={intl.formatMessage({
                            defaultMessage: 'Shop Products',
                            id: 'home.heading.shop_products'
                        })}
                        subtitle={intl.formatMessage(
                            {
                                defaultMessage:
                                    'This section contains content from the catalog. {docLink} on how to replace it.',
                                id: 'home.description.shop_products',
                                description:
                                    '{docLink} is a html button that links the user to https://sfdc.co/business-manager-manage-catalogs'
                            },
                            {
                                docLink: (
                                    <Link
                                        target="_blank"
                                        href={'https://sfdc.co/business-manager-manage-catalogs'}
                                        textDecoration={'none'}
                                        position={'relative'}
                                        _after={{
                                            position: 'absolute',
                                            content: `""`,
                                            height: '2px',
                                            bottom: '-2px',
                                            margin: '0 auto',
                                            left: 0,
                                            right: 0,
                                            background: 'gray.700'
                                        }}
                                        _hover={{textDecoration: 'none'}}
                                    >
                                        {intl.formatMessage({
                                            defaultMessage: 'Read docs',
                                            id: 'home.link.read_docs'
                                        })}
                                    </Link>
                                )
                            }
                        )}
                    >
                        <Stack pt={8} spacing={16}>
                            <ProductScroller
                                products={productSearchResult?.hits}
                                isLoading={isLoading}
                            />
                        </Stack>
                    </Section>
                </Island>
            )}

            <Island hydrateOn={'visible'}>
                <Section
                    padding={4}
                    paddingTop={32}
                    title={intl.formatMessage({
                        defaultMessage: 'Features',
                        id: 'home.heading.features'
                    })}
                    subtitle={intl.formatMessage({
                        defaultMessage:
                            'Out-of-the-box features so that you focus only on adding enhancements.',
                        id: 'home.description.features'
                    })}
                >
                    <Container maxW={'6xl'} marginTop={10}>
                        <SimpleGrid columns={{base: 1, md: 2, lg: 3}} spacing={10}>
                            {features.map((feature, index) => {
                                const featureMessage = feature.message
                                return (
                                    <HStack key={index} align={'top'}>
                                        <VStack align={'start'}>
                                            <Flex
                                                width={16}
                                                height={16}
                                                align={'center'}
                                                justify={'left'}
                                                color={'gray.900'}
                                                paddingX={2}
                                            >
                                                {feature.icon}
                                            </Flex>
                                            <Text
                                                as="h3"
                                                color={'black'}
                                                fontWeight={700}
                                                fontSize={20}
                                            >
                                                {intl.formatMessage(featureMessage.title)}
                                            </Text>
                                            <Text color={'black'}>
                                                {intl.formatMessage(featureMessage.text)}
                                            </Text>
                                        </VStack>
                                    </HStack>
                                )
                            })}
                        </SimpleGrid>
                    </Container>
                </Section>
            </Island>

            <Island hydrateOn={'visible'}>
                <Section
                    padding={4}
                    paddingTop={32}
                    title={intl.formatMessage({
                        defaultMessage: "We're here to help",
                        id: 'home.heading.here_to_help'
                    })}
                    subtitle={
                        <>
                            <>
                                {intl.formatMessage({
                                    defaultMessage: 'Contact our support staff.',
                                    id: 'home.description.here_to_help'
                                })}
                            </>
                            <br />
                            <>
                                {intl.formatMessage({
                                    defaultMessage: 'They will get you to the right place.',
                                    id: 'home.description.here_to_help_line_2'
                                })}
                            </>
                        </>
                    }
                    actions={
                        <Button
                            as={Link}
                            href="https://help.salesforce.com/s/?language=en_US"
                            target="_blank"
                            width={'auto'}
                            paddingX={7}
                            _hover={{textDecoration: 'none'}}
                        >
                            <FormattedMessage
                                defaultMessage="Contact Us"
                                id="home.link.contact_us"
                            />
                        </Button>
                    }
                    maxWidth={'xl'}
                />
            </Island>
        </Box>
    )
}

Home.getTemplateName = () => 'home'

export default Home