import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/styles';
import { Button } from '@material-ui/core';

import { SearchInput } from 'components';

const useStyles = makeStyles(theme => ({
  root: {},
  row: {
    height: '42px',
    display: 'flex',
    alignItems: 'center',
    marginTop: theme.spacing(1)
  },
  spacer: {
    flexGrow: 1
  },
  Button: {
    marginRight: theme.spacing(1)
  },
  importButton: {
    marginRight: theme.spacing(1)
  },
  exportButton: {
    marginRight: theme.spacing(1)
  },
  searchInput: {
    marginRight: theme.spacing(1)
  }
}));

const DriveToolbar = props => {
  const { className, ...rest } = props;

  const classes = useStyles();

  return (
    <div
      {...rest}
      className={clsx(classes.root, className)}
    >
      <div className={classes.row}>
        <span className={classes.spacer} />
        <Button className={classes.Button}>새 폴더</Button>
        <Button className={classes.Button}>폴더 업로드</Button>
        <Button
          color="primary"
          variant="contained"
        >
          파일 업로드
        </Button>
      </div>
      <div className={classes.row}>
        {/* 파일 클릭했을 때 표시 */}
        <span className={classes.spacer} />
        <Button className={classes.Button}>공유</Button>
        <Button className={classes.Button}>미리보기</Button>
        <Button className={classes.Button}>삭제</Button>
        <Button className={classes.Button}>이름 바꾸기</Button>
        <Button className={classes.Button}>이동</Button>
        <Button className={classes.Button}>다운로드</Button>
      </div>
      <div className={classes.row}>
        <SearchInput
          className={classes.searchInput}
          placeholder="파일, 폴더 검색"
        />
      </div>
    </div>
  );
};

DriveToolbar.propTypes = {
  className: PropTypes.string
};

export default DriveToolbar;