// Basic Dropdown
import { Dropdown, Anchor } from "atomize";
const menuList = (
  <Div>
    {["Option 1", "Option 2", "Option 3"].map((name, index) => (
      <Anchor d="block" p={{ y: "0.25rem" }}>
        {name}
      </Anchor>
    ))}
  </Div>
);
class BasicDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showDropdown: false,
    };
  }
  render() {
    const { showDropdown } = this.state;
    return (
      <Dropdown
        isOpen={showDropdown}
        onClick={() =>
          this.setState({ showDropdown: !showDropdown })
        }
        menu={menuList}
      >
        Click me
      </Dropdown>
    );
  }
}
export default BasicDropdown;

// Basic Modal
import { Div, Button, Modal, Icon, Text } from "atomize";
const AlignStartModal = ({ isOpen, onClose }) => {
  return (
    <Modal isOpen={isOpen} onClose={onClose} align="start" rounded="md">
      <Icon
        name="Cross"
        pos="absolute"
        top="1rem"
        right="1rem"
        size="16px"
        onClick={onClose}
        cursor="pointer"
      />
      <Div d="flex" m={{ b: "4rem" }}>
        <Icon
          name="AlertSolid"
          color="warning700"
          m={{ t: "0.35rem", r: "0.5rem" }}
        />
        <Text p={{ l: "0.5rem", t: "0.25rem" }} textSize="subheader">
          Do you really want to submit the request.
        </Text>
      </Div>
      <Div d="flex" justify="flex-end">
        <Button
          onClick={onClose}
          bg="gray200"
          textColor="medium"
          m={{ r: "1rem" }}
        >
          Cancel
        </Button>
        <Button onClick={onClose} bg="info700">
          Yes, Submit
        </Button>
      </Div>
    </Modal>
  );
};
class BasicModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }
  render() {
    const { showModal } = this.state;
    return (
      <>
        <Button
          bg="info700"
          hoverBg="info600"
          m={{ b: "1rem" }}
          onClick={() => this.setState({ showModal: true })}
        >
          Open Basic Modal (Align Start)
        </Button>
        <AlignStartModal
          isOpen={showModal}
          onClose={() => this.setState({ showModal: false })}
        />
      </>
    );
  }
}
export default BasicModal;

// Basic Sidedrawer
import { Div, Button, SideDrawer, Icon, Text } from "atomize";
const BasicSideDrawer = ({ isOpen, onClose }) => {
  return (
    <SideDrawer isOpen={isOpen} onClose={onClose}>
      <Div d="flex" m={{ b: "4rem" }}>
        <Icon name="AlertSolid" color="warning700" />
        <Text p={{ l: "0.5rem", t: "0.25rem" }}>This is the modal</Text>
      </Div>
      <Div d="flex" justify="flex-end">
        <Button
          onClick={onClose}
          bg="gray200"
          textColor="medium"
          m={{ r: "1rem" }}
        >
          Cancel
        </Button>
        <Button onClick={onClose} bg="info700">
          Submit
        </Button>
      </Div>
    </SideDrawer>
  );
};
class Drawer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showSideDrawer: false
    };
  }
  render() {
    const { showSideDrawer } = this.state;
    return (
      <>
        <Button
          bg="info700"
          hoverBg="info600"
          m={{ r: "0.5rem" }}
          onClick={() => this.setState({ showSideDrawer: true })}
        >
          Show Basic Sidedrawer
        </Button>
        <BasicSideDrawer
          isOpen={showSideDrawer}
          onClose={() => this.setState({ showSideDrawer: false })}
        />
      </>
    );
  }
}
export default Drawer;

// Auto Closed Notifiation
import { Div, Button, Notification } from "atomize";
class MyNotifation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showNotification: false
    };
  }
  render() {
    const { showNotification } = this.state;
    return (
      <>
        <Button
          bg="gray700"
          hoverBg="gray600"
          m={{ r: "0.5rem" }}
          onClick={() => this.setState({ showNotification: true })}
        >
          Show auto close notification
        </Button>
        <Notification
          isOpen={showNotification}
          onClose={() => this.setState({ showNotification: false })}
        >
          This notification is self closable
        </Notification>
      </>
    );
  }
}
export default MyNotifation;