import React from 'react';
import { Container, Row } from 'components/layout';
import { useResponsiveLayout } from 'hooks';
import { Button, Divider, Text, Visible, Dropdown, Heading as HeadingBase } from 'components';
import { Filter } from 'icons';

const Action = () => {
  const { isMobile, isTabletMD, isTabletSM } = useResponsiveLayout();
  const isShowFilter = isTabletMD || isTabletSM || isMobile;
  return (
    <>
      <Visible if={!isShowFilter}>
        <Row alignItems="center">
          <Row alignItems="center">
            <Text variant="body" weightVariant="bold" color="title">
              Paid vs Free
            </Text>
            <Dropdown
              ml="s"
              placeholder=""
              onChangeValue={() => {}}
              variant="outline"
              dropdownVariant="outline"
              value="all-spaces"
              titleColor="caption"
              items={['all-spaces', 'all-spaces']}
              sizeVariant="small"
            />
          </Row>
          <Divider mx="l" colorVariant="divider" directionVariant="vertical" />
          <Row alignItems="center">
            <Text variant="body" weightVariant="bold" color="title">
              Type
            </Text>
            <Dropdown
              ml="s"
              placeholder=""
              onChangeValue={() => {}}
              variant="outline"
              dropdownVariant="outline"
              titleColor="caption"
              value="all-spaces"
              items={['all-spaces', 'all-spaces']}
              sizeVariant="small"
            />
          </Row>
        </Row>
      </Visible>
      <Visible if={isShowFilter}>
        <Button
          variant="outline"
          sizeVariant="small"
          rightElement={<Filter colorVariant="title" />}
          title="Filter By"
          titleColor="title"
        />
      </Visible>
    </>
  );
};
export const Heading = () => {
  const { isMobile } = useResponsiveLayout();
  const headingMarginX = isMobile ? 's' : 'l';

  return (
    <Container>
      <HeadingBase
        mx={headingMarginX}
        my="xs"
        title="Explore Spaces"
        badge={6}
        isAction={true}
        action={<Action />}
        onPress={() => {}}
      />
    </Container>
  );
};