import React from 'react';
import styled from 'styled-components';
import { Label, TextArea } from '@bjsdistribution/dms-component-library';
import { useUpdateTask } from '../order-actions/store';

function TextSection() {
  const [taskPayload, setTaskPayload] = useUpdateTask();

  const onChangeDetails = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setTaskPayload({
      ...taskPayload,
      description: event.target.value,
    });
  };

  return (
    <Text>
      <Label label="Details" />
      <TextField
        placeholder="Type here...."
        value={taskPayload?.description || ''}
        onChange={onChangeDetails}
      />
    </Text>
  );
}

const TextField = styled(TextArea)`
  width: 97% !important;
`;

const Text = styled.div`
  display: grid;
  margin-top: 2%;
`;

export default TextSection;
