// Creating a div
import { Div } from "atomize";
<Div
  bg="gray200"
  d="flex"
  align="center"
  p="1rem"
>
  This is the div
</Div>

// Creating a h1
import { Text } from "atomize";
<Text tag="h1" textSize="display1" m={{ b: "4rem" }}>
  This is h1 of display1 size
</Text>

// Add Icon
import { Icon } from "atomize";
<Icon name="Add" color="black" size="20px" />

// Icon Buttons
import { Div, Button } from "atomize";
<Div d="flex">
  // Search Button
  <Button
    h="2.5rem"
    w="2.5rem"
    bg="warning700"
    hoverBg="warning600"
    rounded="circle"
    m={{ r: "1rem" }}
    shadow="2"
    hoverShadow="4"
  >
    <Icon name="Search" size="20px" color="white" />
  </Button>
  // Bookmark Button
  <Button
    h="2.5rem"
    w="2.5rem"
    bg="info700"
    hoverBg="info600"
    rounded="circle"
    m={{ r: "1rem" }}
    shadow="2"
    hoverShadow="4"
  >
    <Icon name="BookmarkSolid" size="20px" color="white" />
  </Button>
  // Delete Button
  <Button
    h="2.5rem"
    w="2.5rem"
    bg="danger700"
    hoverBg="danger600"
    rounded="circle"
    m={{ r: "1rem" }}
    shadow="2"
    hoverShadow="4"
  >
    <Icon name="DeleteSolid" size="20px" color="white" />
  </Button>
  // Play Button
  <Button
    h="2.5rem"
    w="2.5rem"
    bg="success700"
    hoverBg="success600"
    rounded="circle"
    m={{ r: "1rem" }}
    shadow="2"
    hoverShadow="4"
  >
    <Icon name="Play" size="20px" color="white" />
  </Button>
  // Heart Button
  <Button
    h="2.5rem"
    w="2.5rem"
    bg="danger300"
    hoverBg="danger400"
    rounded="lg"
    m={{ r: "1rem" }}
  >
    <Icon name="HeartSolid" size="20px" color="danger700" />
  </Button>
  // Camera Button
  <Button
    h="2.5rem"
    w="2.5rem"
    bg="info300"
    hoverBg="info400"
    rounded="lg"
    m={{ r: "1rem" }}
  >
    <Icon name="CameraSolid" size="20px" color="info700" />
  </Button>
  // Message Button
  <Button
    h="2.5rem"
    w="2.5rem"
    bg="success300"
    hoverBg="success400"
    rounded="lg"
    m={{ r: "1rem" }}
  >
    <Icon name="MessageSolid" size="20px" color="success700" />
  </Button>
  // Attachment Button
  <Button
    h="2.5rem"
    w="2.5rem"
    bg="info300"
    hoverBg="info400"
    rounded="lg"
    m={{ r: "1rem" }}
  >
    <Icon name="Attachment" size="20px" color="info700" />
  </Button>
</Div>

// Basic Input
import { Input } from "atomize";
const BasicInput = () => {
  return (
    <Input placeholder="Basic Input" />
  );
}

// Basic Checkboxes
import { Checkbox, Label } from "atomize";
const BasicCheckboxes = () => {
  return (
    <>
        <Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
            <Checkbox /> Normal Checkbox
        </Label>
        <Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
            <Checkbox disabled /> Disabled
        </Label>
        <Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
            <Checkbox undetermine /> Undetermine
        </Label>
    </>
  );
}

// Managing through State
import { Radiobox, Label, Div } from "atomize";
class ManagingRadioboxWithState extends React.Component {
    constructor(props) {
        super(props);
    
        this.state = {
            selectedCountValue: 1
        };
        this.toggleSelectedCount = this.toggleSelectedCount.bind(this);
    }
    toggleSelectedCount(value) {
      this.setState({
        selectedCountValue: value,
      })
    }
    render() {
        const { selectedCountValue} = this.state;
        return (
            <Div d="flex">
              <Label
                align="center"
                textWeight="600"
                m={{ b: "0.5rem", r: "2rem" }}
              >
                <Radiobox
                  onChange={() => this.toggleSelectedCount(1)}
                  checked={ selectedCountValue === 1 }
                  name="count"
                />
                1
              </Label>
              <Label
                align="center"
                textWeight="600"
                m={{ b: "0.5rem", r: "2rem" }}
              >
                <Radiobox
                  onChange={() => this.toggleSelectedCount(2)}
                  checked={ selectedCountValue === 2 }
                  name="count"
                />
                2
              </Label>
              <Label
                align="center"
                textWeight="600"
                m={{ b: "0.5rem", r: "2rem" }}
              >
                <Radiobox
                  onChange={() => this.toggleSelectedCount(3)}
                  checked={ selectedCountValue === 3 }
                  name="count"
                />
                3
              </Label>
              <Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
                <Radiobox
                  onChange={() => this.toggleSelectedCount(4)}
                  checked={ selectedCountValue === 4 }
                  name="count"
                />
                4
              </Label>
            </Div>
        );
    }
}

// Basic Switches
import { Switch, Label } from "atomize";
class Switches extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedSwitchValue1: false,
      selectedSwitchValue2: false
    };
  }
  render() {
    const { selectedSwitchValue1, selectedSwitchValue2 } = this.state;
    return (
      <Label
        onClick={() =>
          this.setState({ selectedSwitchValue1: !selectedSwitchValue1 })
        }
        align="center"
        textWeight="600"
        m={{ b: "1rem" }}
        >
          <Switch
            checked={selectedSwitchValue1}
          />
          Normal Switch
      </Label>
    );
  }
}

// Images
import { Image, Div, Row, Col } from "atomize";
const BasicImages = () => {
  return (
    <Row>
      <Col>
        <Image src="https://images.unsplash.com/photo-1559963629-38ed0fbd4c86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" />
      </Col>
      <Col>
        <Div
          bgImg="https://images.unsplash.com/photo-1559963629-38ed0fbd4c86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
          bgSize="cover"
          bgPos="center"
          h="20rem"
        />
      </Col>
    </Row>
  );
}

// Basic Tags
import { Div, Tag, Anchor, Icon } from "atomize";
const BasicTags = () => {
  return (
    <Div d="flex">
      <Tag m={{ r: "1rem", b: "1rem" }}>Tag 1</Tag>
      <Tag m={{ r: "1rem", b: "1rem" }}>Link</Tag>
      <Tag
        m={{ r: "1rem", b: "1rem" }}
        suffix={
          <Icon
            name="Cross"
            size="12px"
            m={{ l: "1rem" }}
            cursor="pointer"
          />
        }
      >
        Close
      </Tag>
      <Tag
        m={{ r: "1rem", b: "1rem" }}
        prefix={<Icon name="Edit" size="12px" m={{ r: "0.25rem" }} />}
      >
        Edit
      </Tag>
      <Anchor href="https://www.google.com" target="_blank">
        <Tag
          hoverBg="info200"
          m={{ r: "1rem", b: "1rem" }}
          prefix={<Icon name="Link" size="12px" m={{ r: "0.25rem" }} />}
          cursor="pointer"
        >
          Link
        </Tag>
      </Anchor>
    </Div>
  );
}

// Basic Links
import { Div, Tag, Anchor, Icon } from "atomize";
const BasicLinks = () => {
  return (
    <>
        <Anchor
            href="https://www.google.com"
            target="_blank"
            d="block"
            m={{ b: "1rem" }}
        >
            This is the link
        </Anchor>
        <Anchor
            href="https://www.google.com"
            target="_blank"
            textDecor="underline"
            d="block"
        >
            This is the underlined link
        </Anchor>
    </>
  );
}

// Basic Links
import { Div, Tag, Anchor, Icon } from "atomize";
class Collapse extends React.Component {
    constructor(props) {
        super(props);
    
        this.state = {
          showCollapse: false
        };
    }
    render() {
        const { selectedCode, showCollapse } = this.state;
        return (
            <>
                <Button
                    onClick={() => this.setState({ showCollapse: !showCollapse })}
                    m={{ b: "1rem" }}
                >
                    Toggle Collapse
                </Button>
                <Collapse isOpen={showCollapse}>
                    <Div
                    bg="gray100"
                    border="1px solid"
                    borderColor="gray400"
                    rounded="lg"
                    >
                    {["This", "section", "is", "inside", "collapse"].map(
                        (name, index) => (
                        <Div
                            p={{ x: "1rem", y: "0.75rem" }}
                            border={{ b: index !== 4 && "1px solid" }}
                            borderColor="gray400"
                        >
                            {name}
                        </Div>
                        )
                    )}
                    </Div>
                </Collapse>
            </>
        );
    }
}