import React from 'react';
import styled from 'styled-components';
import { Row, Col } from 'react-styled-flexboxgrid';
import { Margin } from 'styled-components-spacing';
import Value from 'react-redux-values';
import ReduxForm from 'declarative-redux-form';
import { KeyValue } from '@components/instances';
import { withTheme } from 'styled-components';
import remcalc from 'remcalc';
import {
H3,
H4,
Divider,
FormGroup,
FormLabel,
Input,
Button,
StatusLoader,
CloseIcon,
TagItem,
TagList,
TagItemContainer
} from 'joyent-ui-toolkit';
const FlexEnd = styled(Col)`
display: flex;
justify-content: flex-end;
`;
const CloseIconActionable = styled(CloseIcon)`
cursor: pointer;
`;
const Tags = ({
handleRemove,
addKey,
handleCreate,
handleClear,
theme,
toggleEdit,
removeTag,
filterTags,
state,
edit,
tags
}) => {
const _filterTags = (
Filter
);
const _addTag = (
{({ value: expanded, onValueChange }) =>
!expanded ? (
) : (
[
,
handleClear(addKey)}
onToggleExpanded={() => onValueChange(!expanded)}
onRemove={() => handleRemove(addKey)}
expanded={expanded}
label="tag"
create
>
{KeyValue}
]
)
}
);
const _title = (
{tags.length} {tags.length === 1 ? 'Tag' : 'Tags'}
);
const _noTags =
!tags ||
(tags.length === 0 && No tags have been added yet
);
const _list = tags.length > 0 && (
{tags
.sort(
(a, b) =>
a.initialValues.name.toLowerCase() <
b.initialValues.name.toLowerCase()
? -1
: 1
)
.map(tag => (
{state[
`${tag.initialValues.name}-${tag.initialValues.value}-deleting`
] ? (
) : (
{tag.initialValues.name}: {tag.initialValues.value}
{edit && (
removeTag(
tag.initialValues.name,
tag.initialValues.value
)
}
fill={theme.grey}
height={remcalc(9)}
/>
)}
)}
))}
);
return [
{_filterTags}
{_addTag}
,
,
_title,
_list,
_noTags
];
};
export default withTheme(Tags);