react

/*eslint-disable no-unused-vars*/
import React, {Component} from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import QuantityInput from "../../../stories/tokenAllocation/QuantityInput";

const AllocationTypeContainer = styled.div`
    padding: 10px;
  
  @media only screen and (min-width: 600px) {
    margin-top: 40px;
  }
`;

const NameSwitch = name => {
    switch (name){
    case 'DEVELOPER_BACKEND':
        return{
            color: '#6d7c9b',
        };
    case 'DEVELOPER_FRONTEND':
        return{
            color: '#d8b468',
        };
    case 'WRITER_CONTENT':
        return{
            color: '#53906e',
        };
    case 'WRITER_CITATIONS':
        return{
            color: '#b0534e',
        };
    default:
        return{
            color: 'black',
        };
    }
};

const ImageSwitch = name => {
    switch (name){
    case 'DEVELOPER_BACKEND':
        return{
            width: '100px',
            height: '100px',
        };
    case 'DEVELOPER_FRONTEND':
        return{
            width:'100px',
            height:'100px',
        };
    case 'WRITER_CONTENT':
        return{
            width:'100px',
            height:'100px',
        };
    case 'WRITER_CITATIONS':
        return{
            width:'100px',
            height:'100px',
        };
    default:
        return{
            width:'50px',
            height:'70px',
        };
    }
};

const TitleSwitch = name => {
  switch (name){
    case 'DEVELOPER_BACKEND':
      return 'Backend Developer';
    case 'DEVELOPER_FRONTEND':
      return 'Frontend Developer';
    case 'WRITER_CONTENT':
      return <span>Content<br />Writer</span>;
    case 'WRITER_CITATIONS':
      return <span>Outreach<br />Expert</span>;
    default:
      return '';
  }
};

const AllocationDetailContainer = styled.div`
    background-color: #fefefe;
    width: 200px;
    height:260px;
    border: 2px solid #e6e5ea;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    align-items: center;
    color: #A0A5A9;
    margin-top: -50px;
`;

const AllocationDetail = styled.div `
    text-align: center;
    margin-top:  -10px;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
`;

const AllocationName = styled.h2`
    ${(props) => NameSwitch(props.name)};
    padding-top: 30px;
    text-align: center;
`;

const AllocationImageContainer = styled.div`
  padding-left: 52px;
  padding-bottom: 20px;
`;

const AllocationImage = styled.img`
   ${(props) => ImageSwitch(props.name)};
`;

const AllocationType = ({ name, detail: {image, description }, onChange, initialValue, disabled }) => (
  <AllocationTypeContainer className="allocation-type">

    <AllocationImageContainer>
      <AllocationImage name={name} src={image} alt="Allocation Type" />
    </AllocationImageContainer>

    <AllocationDetailContainer>
      <AllocationName name={name}>{TitleSwitch(name)}</AllocationName>
      <AllocationDetail>{description}</AllocationDetail>
      <QuantityInput name={name} onChange={onChange} initialValue={initialValue} disabled={disabled} />
    </AllocationDetailContainer>

  </AllocationTypeContainer>
);

AllocationType.propTypes = {
  name: PropTypes.string.isRequired,
  detail: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired,
  initialValue: PropTypes.number,
  disabled: PropTypes.bool,
};

AllocationType.defaultProps = {
  initialValue: 0,
  disabled: false,
};

export default AllocationType;