import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect, Link } from "react-router-dom";
import { Button, Container, Header, Segment } from "semantic-ui-react";

class ClientShifts extends Component {
  render() {
    const { selfUser } = this.props;
    if (selfUser.client) {
      return <ClientShiftsView user={selfUser} />;
    } else {
      return <Redirect to="/" />;
    }
  }
}

function mapStateToProps(state) {
  return { selfUser: state.user.selfUser };
}

const ClientShiftsView = ({ user }) => (
  <Container>
    <Header>Shifts</Header>
    <Segment>
      <Button
        basic
        color="green"
        size="small"
        as={Link}
        to="/user/profile/client/add-shift"
      >
        Schedule a Shift
      </Button>
    </Segment>
    <p>Todo: List Shifts</p>
  </Container>
);

export default connect(mapStateToProps)(ClientShifts);