import React from 'react';
import styled from 'styled-components';
import { Grid, GridItem, Wrapper, Section, Spacer } from '@lendi/ui/Layout';
import BankWest from '@lendi-ui/lender-logos/BankWest';
import Anz from '@lendi-ui/lender-logos/Anz';
import Citibank from '@lendi-ui/lender-logos/Citibank';
import Westpac from '@lendi-ui/lender-logos/Westpac';
import Nab from '@lendi-ui/lender-logos/Nab';
import StGeorge from '@lendi-ui/lender-logos/StGeorge';
import Hsbc from '@lendi-ui/lender-logos/Hsbc';
import Ing from '@lendi-ui/lender-logos/Ing';
import Macquarie from '@lendi-ui/lender-logos/Macquarie';
import CommonwealthBank from '@lendi-ui/lender-logos/CommonwealthBank';
import { AnchorButton } from '@lendi/ui/Button';
import { Text } from '@lendi/ui/Typography';
import { Card } from '@lendi-ui/card';
import { Spacing } from '../../../tokens';
import { getRadius } from '@lendi-ui/commons/borders';

export const StyledGridContent = styled.div`
  background-color: ${({ theme }) => theme.color.fill.contrast};
  color: ${({ theme }) => theme.color.text.inverse};
  padding: ${Spacing.sm};
`;

// hack, to be rid of eslinting no default export error
export default StyledGridContent;

const StyledGridItem = styled(GridItem)`
  display: inline-flex;
`;

const ColourDiv = styled.div`
  background-color: ${({ theme }) => theme.color.fill.disabled};
  height: 300px;
  padding: ${Spacing.lg};
`;

const TileDiv = styled(Spacer)`
  display: flex;
  border: solid 1px ${({ theme }) => theme.color.border.container};
  border-radius: ${getRadius()};
  padding: ${Spacing.sm};
`;

export const DefaultGrid = (args) => (
  <Grid>
    <GridItem>
      <StyledGridContent>Default 100%</StyledGridContent>
    </GridItem>
    <GridItem>
      <StyledGridContent>Default 100%</StyledGridContent>
    </GridItem>
  </Grid>
);

export const SimpleGridExample = (args) => (
  <Grid>
    <GridItem xs="2">
      <StyledGridContent>xs="2"</StyledGridContent>
    </GridItem>
    <GridItem xs="2">
      <StyledGridContent>xs="2"</StyledGridContent>
    </GridItem>
    <GridItem sm="6">
      <StyledGridContent>sm="6"</StyledGridContent>
    </GridItem>
    <GridItem sm="6">
      <StyledGridContent>sm="6"</StyledGridContent>
    </GridItem>
    <GridItem sm="8" md="3">
      <StyledGridContent>sm="6" md="3"</StyledGridContent>
    </GridItem>
    <GridItem sm="4" md="3">
      <StyledGridContent>sm="6" md="3"</StyledGridContent>
    </GridItem>
    <GridItem sm="6" md="3">
      <StyledGridContent>sm="6" md="3"</StyledGridContent>
    </GridItem>
    <GridItem sm="6" md="3">
      <StyledGridContent>sm="6" md="3"</StyledGridContent>
    </GridItem>
    <GridItem sm="6" md="8">
      <StyledGridContent>sm="6" md="8"</StyledGridContent>
    </GridItem>
    <GridItem sm="6" md="4">
      <StyledGridContent>sm="6" md="4"</StyledGridContent>
    </GridItem>
    <GridItem sm="6" md="4">
      <StyledGridContent>sm="6" md="4"</StyledGridContent>
    </GridItem>
    <GridItem sm="6" md="4">
      <StyledGridContent>sm="6" md="4"</StyledGridContent>
    </GridItem>
    <GridItem sm="12" md="4">
      <StyledGridContent>sm="12" md="4"</StyledGridContent>
    </GridItem>
  </Grid>
);

export const AutoWidthGridExample = (args) => (
  <Grid>
    <GridItem sm="auto">
      <StyledGridContent>sm="auto"</StyledGridContent>
    </GridItem>
    <GridItem sm="auto">
      <StyledGridContent>sm="auto"</StyledGridContent>
    </GridItem>
    <GridItem sm="auto">
      <StyledGridContent>sm="auto"</StyledGridContent>
    </GridItem>
  </Grid>
);

const BasicTileGroup = () => (
  <>
    <GridItem sm="6" md="3">
      <TileDiv ygap="md">
        <Text tag="h3" variant="subtitle1">
          Get expert advice
        </Text>
        <Text tag="p">
          Our expert insights will help guide you through the process and get you to your goal sooner.
        </Text>
      </TileDiv>
    </GridItem>
    <GridItem sm="6" md="3">
      <TileDiv ygap="md">
        <Text tag="h3" variant="subtitle1">
          We do all the hard work
        </Text>
        <Text tag="p">
          Experience the Aussie Broker difference, we take out the leg work and we'll fit into your schedule.
        </Text>
      </TileDiv>
    </GridItem>
    <GridItem sm="6" md="3">
      <TileDiv ygap="md">
        <Text tag="h3" variant="subtitle1">
          Free appointment
        </Text>
        <Text tag="p">An appointment with an Aussie Broker is at no cost to you.</Text>
      </TileDiv>
    </GridItem>
  </>
);

export const GridInsideGrid = (args) => (
  <Grid>
    <GridItem md="6">
      <Grid>
        <GridItem xs="2" sm="6" md="auto">
          <AnchorButton href="/" variant="secondary" size="sm" width="100%">
            Some link
          </AnchorButton>
        </GridItem>
        <GridItem xs="2" sm="6" md="auto">
          <AnchorButton href="/" variant="secondary" size="sm" width="100%">
            Another link
          </AnchorButton>
        </GridItem>
      </Grid>
    </GridItem>
    <GridItem md="6">
      <Grid>
        <GridItem xs="2" sm="6" md="auto">
          <AnchorButton href="/" variant="secondary" size="sm" width="100%">
            Some link
          </AnchorButton>
        </GridItem>
        <GridItem xs="2" sm="6" md="auto">
          <AnchorButton href="/" variant="secondary" size="sm" width="100%">
            Another link
          </AnchorButton>
        </GridItem>
      </Grid>
    </GridItem>
  </Grid>
);

export const ComplexLayoutExample = (args) => (
  <>
    <Section>
      <Wrapper isCentered>
        <Spacer ygap="md">
          <Text tag="h2" variant="title1">
            Thousands of home loans from over 20 leading lenders*
          </Text>
          <Grid alignItems="center">
            <GridItem xs="2" sm="auto">
              <CommonwealthBank width="auto" height="80px" />
            </GridItem>
            <GridItem xs="2" sm="auto">
              <Anz width="auto" height="80px" />
            </GridItem>

            <GridItem xs="2" sm="auto">
              <Westpac width="auto" height="80px" />
            </GridItem>
            <GridItem xs="2" sm="auto">
              <Nab width="auto" height="80px" />
            </GridItem>
            <GridItem xs="2" sm="auto">
              <StGeorge width="auto" height="80px" />
            </GridItem>
            <GridItem xs="2" sm="auto">
              <BankWest width="auto" height="80px" />
            </GridItem>
            <GridItem xs="2" sm="auto">
              <Hsbc width="auto" height="80px" />
            </GridItem>
            <GridItem xs="2" sm="auto">
              <Citibank width="auto" height="80px" />
            </GridItem>
            <GridItem xs="2" sm="auto">
              <Macquarie width="auto" height="80px" />
            </GridItem>
            <GridItem xs="2" sm="auto">
              <Ing width="auto" height="80px" />
            </GridItem>
          </Grid>

          <Grid>
            <GridItem sm="auto">
              <AnchorButton href="/" variant="primary">
                Compare more lenders
              </AnchorButton>
            </GridItem>
            <GridItem sm="auto">
              <Text tag="p" variant="body2">
                *Not all lenders are available through all brokers
              </Text>
            </GridItem>
          </Grid>
        </Spacer>
      </Wrapper>
    </Section>
    <Section>
      <Wrapper isCentered>
        <Spacer ygap="xl">
          <Spacer ygap="md">
            <Text tag="h2" variant="title1">
              Your local Aussie Broker can help make it happen
            </Text>
            <Text tag="p">
              With a network of nearly 1000 brokers and over 220 stores, you can go straight to Aussie.
            </Text>
          </Spacer>
          <Grid>
            <GridItem md="4">
              <Spacer ygap="md">
                <Text tag="h3" variant="title2">
                  Get expert advice
                </Text>
                <Text tag="p">
                  Our expert insights will help guide you through the process and get you to your goal sooner.
                </Text>
              </Spacer>
            </GridItem>
            <GridItem md="4">
              <Spacer ygap="md">
                <Text tag="h3" variant="title2">
                  We do all the hard work
                </Text>
                <Text tag="p">
                  Experience the Aussie Broker difference, we take out the leg work and we'll fit into your schedule.
                </Text>
              </Spacer>
            </GridItem>
            <GridItem md="4">
              <Spacer ygap="md">
                <Text tag="h3" variant="title2">
                  Free appointment
                </Text>
                <Text tag="p">An appointment with an Aussie Broker is at no cost to you.</Text>
              </Spacer>
            </GridItem>
          </Grid>
          <Spacer xgap="md" xalign="center">
            <AnchorButton href="/" variant="primary">
              Find a broker
            </AnchorButton>
            <AnchorButton href="/" variant="text">
              Learn more about our brokers
            </AnchorButton>
          </Spacer>
        </Spacer>
      </Wrapper>
    </Section>
    <Section>
      <Wrapper isCentered>
        <Spacer ygap="xl">
          <Text tag="h2" variant="title1">
            4.7 stars from 3K+ reviews
          </Text>
          <Grid>
            <StyledGridItem md="4">
              <Card depth={2}>
                <Card.Header>Bought My First Home!</Card.Header>
                <Card.Content>
                  The approachability, expert advice and realistic expectations set by the mortgage broker, Michael
                  Stock was very helpful throughout the whole first home buyer journey. Michael definitely had many
                  settlements under his belt with all the reassurances he provided.
                </Card.Content>
              </Card>
            </StyledGridItem>
            <StyledGridItem md="4">
              <Card depth={2}>
                <Card.Header>Outstanding service!</Card.Header>
                <Card.Content>
                  They were easy to contact and kept us up to date every step of the way. The process was simple and
                  they were very forthcoming with any costs or paperwork that we needed to fork out.
                </Card.Content>
              </Card>
            </StyledGridItem>
            <StyledGridItem md="4">
              <Card depth={2}>
                <Card.Header>Go-To for all things financial!</Card.Header>
                <Card.Content>
                  the Aussie team have been amazing in the multiple times we have dealt with them. Nothing is ever too
                  much trouble and it definitely makes for a stress-free experience!
                </Card.Content>
              </Card>
            </StyledGridItem>
          </Grid>

          <Grid>
            <GridItem xs="auto" sm="auto">
              <AnchorButton href="/" variant="primary">
                Read more reviews
              </AnchorButton>
            </GridItem>
            <GridItem xs="auto" sm="auto">
              <AnchorButton href="/" variant="text">
                View on product finder
              </AnchorButton>
            </GridItem>
          </Grid>
        </Spacer>
      </Wrapper>
    </Section>
    <hr />
    <Section aria-labelledby="testId">
      <Wrapper isCentered>
        <Grid>
          <GridItem md="6">
            <div style={{ marginBottom: '2rem' }}>
              <Text tag="h2" variant="title1" id="testId">
                Use our helpful calculators to crunch the numbers
              </Text>
            </div>

            <Grid>
              <GridItem xs="2" sm="6">
                <AnchorButton href="/" variant="secondary" size="sm" width="100%">
                  Borrowing calculator
                </AnchorButton>
              </GridItem>
              <GridItem xs="2" sm="6">
                <AnchorButton href="/" variant="secondary" size="sm" width="100%">
                  Stamp duty calculator
                </AnchorButton>
              </GridItem>
              <GridItem xs="2" sm="6">
                <AnchorButton href="/" variant="secondary" size="sm" width="100%">
                  Borrowing calculator
                </AnchorButton>
              </GridItem>
              <GridItem xs="2" sm="6">
                <AnchorButton href="/" variant="secondary" size="sm" width="100%">
                  Stamp duty calculator
                </AnchorButton>
              </GridItem>
              <GridItem xs="2" sm="6">
                <AnchorButton href="/" variant="secondary" size="sm" width="100%">
                  Borrowing calculator
                </AnchorButton>
              </GridItem>
              <GridItem xs="2" sm="6">
                <AnchorButton href="/" variant="secondary" size="sm" width="100%">
                  Stamp duty calculator
                </AnchorButton>
              </GridItem>
            </Grid>
          </GridItem>
          <GridItem md="6">
            <ColourDiv>Some big image</ColourDiv>
          </GridItem>
        </Grid>
      </Wrapper>
    </Section>
  </>
);

ComplexLayoutExample.args = {};